Tuesday, February 25, 2014
Retooling the Tool Tip, Part 2
Blog Entry #311
Welcome back to our discussion of the Java Goodies "Tip Box" script. At this point we have created a custom tool tip and temporarily parked it in the lower-left-hand corner of the document body. To refresh your collective memories, here's what we're working with:
#zTip { background-color: yellow; border: 1px solid blue; color: blue; font-size: 8pt; position: absolute; text-align: center; }
...
<div id="zTip">TipBox Script by dignified<br>For use with MSIE4+</div>• Not mentioned last time: A CSS length lacking a unit identifier is illegal. I have consequently changed the zTip div's border-width from 1 to 1px.
• The tip value's center element markup has been replaced by a
text-align:center; style declaration.Our next task is to move the zTip div to the near vicinity of the Dignified's Domain link:
with (zTip) {
style.posTop = y + 14;
style.posLeft = window.event.x + 10;
... }To reposition the div Ryan reached for Microsoft's proprietary posTop and posLeft properties, which we ran into during our Lissa Explains It All odyssey about a year ago; the original CSS 2 became a W3C Recommendation on 12 May 1998, so Ryan could have used top and left for this operation had he wanted to. As noted/intimated in the Starting offsets subsection of Blog Entry #278, the posTop/posLeft properties have a number data type and their values (a) do not include unit identifiers and (b) are calibrated in pixels in the absence of prior top/left settings.
The top edge of the zTip div is placed 14 pixels below the bottom edge of the Dignified's Domain link. The left edge of the zTip div is placed 10 pixels to the right of the cursor's mouseover position. Regarding the posLeft assignment, I recommend that you check out Dottoro's event.x page vis-à-vis Microsoft's event.x page as the latter features an Example employing the Netscape-cum-W3C event model. FYI: Classical JavaScript has an eventObject.x property that might be relevant if we were mousing over a "layer" (an absolutely/relatively positioned element), but again, Netscape 4.x does not recognize window.event as an event object.
In the name of completeness:
As detailed in the previous post, the y coordinate was obtained by adding the Dignified's Domain link's offsetTop and offsetHeight values. As the link does not actually have an offsetParent (Quirksmode's definition of the offsetParent property is the best that I've seen), the browser determines y according to the viewport coordinate system. The zTip div similarly does not have any absolutely/relatively positioned ancestors (its CSS containing block is the initial containing block) and therefore the posTop/posLeft assignments are also relative to the viewport coordinate system.
As shown above, the posTop/posLeft statements are part of a with statement whose object parameter is set to zTip; we previously discussed the with statement in The new document section of Blog Entry #148. Mozilla's current with statement page warns:
Use of the with statement is not recommended, as it may be the source of confusing bugs and compatibility issues.As for the use of the zTip id value as an object reference for the tool-tip div, Microsoft itself says we shouldn't do that.
We're not done with the with block yet: at no extra charge it attempts to turn on the zTip div's visibility and gives the div a width based on the length of the tip value.
visibility = "visible";
style.width = src.tip.length * 1.5; // <-- (insert this code if you have frames) document.body.offsetWidth - style.posLeft * 2;Its incorrect syntax notwithstanding, the visibility assignment is redundant because the zTip div is already visible. Moreover, the width assignment, whose right-hand side needs a
+"px" term, is unnecessary if you're going to format the tip text with one or more <br>s, as Ryan has done (it's also unnecessary for a short tip string, of course); indeed, upon bounding the div width the tip text may overflow the div, which would look ugly. Finally, I don't know what the // <-- (insert this code ... comment is about - it seems to suggest that in a frames situation the div width should be a function of the document body width and the div's left offset, which makes no sense to me - I'd delete it if I were you.Now you see it, now you don't
Mousing out from a tooltipped element makes the tool tip go away. Accordingly, an unTip( ) function that
(a) zeroes out the zTip div and
(b) listens for mouseout events
is registered on the document object.
document.onmouseout = unTip;
function unTip( ) {
var src = event.srcElement;
if (src.tip) {
zTip.innerHTML = "";
zTip.outerHTML = ""; } }Any mouseout event in the document content area triggers the unTip( ) function because the mouseout event bubbles up from the srcElement - the element/object to which the event is dispatched, a.k.a. the event target - to the document object. Upon mousing out from the Dignified's Domain link or any other src srcElement with a tip attribute, the unTip( ) function sets the zTip div's innerHTML and outerHTML to empty strings.
We've worked with the innerHTML property innumerable times but this is our first encounter with the outerHTML property, which
when set completely replaces the object, including its start and end tags,quoting Microsoft. By definition, an element's outerHTML includes its innerHTML: it follows that the
zTip.innerHTML = ""; statement is superfluous and should be thrown out.The outerHTML property today has cross-browser support - contra Dottoro, Firefox does in fact support it. Once upon a time the W3C aimed to bring the innerHTML property, the outerHTML property, and the insertAdjacentHTML( ) method into HTML5, but that was then and this is now: the Coding Powers That Be have evidently decided that these members should languish in Nonstandardville.
I am unable to figure out why the script behaves strangely with IE 5.2.3 on my computer so let's just move forward and bring it in line with modern browsers - we'll do that in the next post.
- posted by A. Peak @ 2:41 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)