Tooltips position at prior-set location in Firefox

[David Hayes]

I've made tooltips work in Firefox*, but tooltip doesn't appear at the
specified location until the SECOND time that the user passes the mouse over
the location with the mouseover event. What I want is for the user to be
able to put the mouse over text that gives a year (e.g., "(1932)", "(1946)"
and "(1923)") and see the tooltip to the right and slightly beneath the
year.

(For the record -- this needn't concern the debugging effort -- I've also
put in code that overrides the mouse position when the mouse is already too
far to the right on the window or too near the bottom of the window to
display all of the tooltip. In these instances, adjustments are made to the
x-position and y-position of the layer. These parts of the function work
fine.)

What happens instead is the tooltip layer turns up where the mouse had been
on the PREVIOUS mouseover event. (On the first mouseover event after
loading/reloading, the tooltip turns up at the default (0,0) location.)
Thus, when the mouse does a mouseover at (131,50), for example, the layer
turn up at an unexpected location, sometimes even above or below where the
document is currently scrolled to show. However, on the second, third,
fourth, etc., consecutive mouseovers at this location, the tooltip will show
up where it is expected, in this case at or near (141,60).

The link is http://home.earthlink.net/~prodcode/...rTooltips.html. The
Javascript functions are in the file "functns.js " in the same directory.

The relevant code is:

var mereme=text;
document.getEle mentById("overD iv").firstChild .nodeValue=mere me;
document.getEle mentById("overD iv").style.font face="Times";
document.getEle mentById("overD iv").style.top= placeY+"px";
document.getEle mentById("overD iv").style.left =placeX+"px";
document.getEle mentById("overD iv").style.widt h=ltr_width+"px ";
document.getEle mentById("overD iv").style.visi bility="visible ";

placeX and placeY are set earlier, and in any event are set at the same
point in the set of procedures as they are set in IE, yet the current placeX
and placeY positions get used in IE and yet don't influence the next outcome
in Firefox.

Incidentally, the page works just fine in IE, so anyone reading this can
check out the same URL in IE to see the tooltips appear in the same place
every time that the mouse passes over any one particular spot. However,
Firefox uses an entirely different subroutine at this point than does IE, so
there's no point in studying the applicable parts of the code with an eye to
asking why it works different ways in IE and Firefox. (For that matter, IE5
uses a different sub-subroutine than does IE4 and IE6, but this needn't
concern us here. Everything works fine in IE4, IE5 and IE6, so far as I've
determined.)

Last side topic: I realize that as I currenly have the page programmed, in
Firefox (but not IE) the HTML designator for symbols displays as unconverted
HTML rather than as the desired symbol. (The visitor sees "’" spelled
out like that instead of the curled apostrophe.) I haven't yet looked into
all the ways I might fix this. (I understand from this newsgroup that
toReplace.inner HTML might be what I need.) Thus, I didn't post this message
to request help on this matter, although any unsolicited suggestion would be
a valuable this to see for readers of this newsgroup.)

--
David Hayes

(remove the name of the programming language from email address to make it
usable)

* For tooltips to work in Firefox requires a DIV, even if it's almost blank
(an empty DIV won't cut it, but having merely a space or a period in it and
setting it to invisibility, does work), and also that the <SCRIPT> tag
specify "type='text/javascript'" rather than "language='Java Script'".

[RobG]

David Hayes wrote:

I've made tooltips work in Firefox*, but tooltip doesn't appear at the
specified location until the SECOND time that the user passes the mouse over
the location with the mouseover event. What I want is for the user to be
able to put the mouse over text that gives a year (e.g., "(1932)", "(1946)"
and "(1923)") and see the tooltip to the right and slightly beneath the
year.
Have you validated your page? There is no doctype, which is
primarily responsible for the W3C's validator finding 70-odd errors
in the page.

Firefox's JavaScript console reports:

"parent.parent. frames[0] has no properties"

Can I suggest that you look at the 'find position' stuff at
quirksmode:

<URL:http://www.quirksmode. org/js/findpos.html>

It provides a full, cross-browser solution in a few lines of code.

Your year text can be in a span that has a mouseover/out, use this.id
(where id provides a key to your tip text array) to determine the tip
text to show.

That's it. Another suggestion is to put the tip div in the page as
HTML and use display: none to hide it by default, then use
mouseover/out to hide/show it at the appropriate location with
the appropriate text. You don't need to do any other styling with
script, it can all be done with CSS.

There are also some good tool tips at the link below, but they may be
a bit over the top for what you are doing (but there are some good
ideas to pick up):

<URL:http://www.walterzorn. com/tooltip/tooltip_e.htm>

[...] The relevant code is:

var mereme=text;
document.getEle mentById("overD iv").firstChild .nodeValue=mere me;
document.getEle mentById("overD iv").style.font face="Times";
document.getEle mentById("overD iv").style.top= placeY+"px";
document.getEle mentById("overD iv").style.left =placeX+"px";
document.getEle mentById("overD iv").style.widt h=ltr_width+"px ";
document.getEle mentById("overD iv").style.visi bility="visible ";

As a side issue (using the idea above makes this code redundant)
looking up the element every time is very inefficient - how about:

var oDiv = document.getEle mentById("overD iv");
oDiv.firstChild .nodeValue = mereme;
oDiv.style.font Family = "Times";
oDiv.style.top = placeY+"px";
oDiv.style.left = placeX+"px";
oDiv.style.widt h = ltr_width+"px";
oDiv.style.visi bility = "visible";

Note that style property "fontface" should be "fontFamily ".

[...]

--
Rob

[David Hayes]

"RobG" <rg***@iinet.ne t.auau> wrote in message
news:42******** *************** @per-qv1-newsreader-01.iinet.net.au ...

David Hayes wrote:

I've made tooltips work in Firefox*, but tooltip doesn't appear at the
specified location until the SECOND time that the user passes the mouse over the location with the mouseover event. What I want is for the user to be able to put the mouse over text that gives a year (e.g., "(1932)", "(1946)" and "(1923)") and see the tooltip to the right and slightly beneath the
year.
Have you validated your page? There is no doctype, which is
primarily responsible for the W3C's validator finding 70-odd errors
in the page.

Firefox's JavaScript console reports:

"parent.parent. frames[0] has no properties"

The page I gave the URL for is an edited sample page, and even the full page
is only one of several that access the same ".js" file. Believe me, I often
call functions that use parent.parent.f rames[0]. It's simply the case that
parent.parent.f rames[0] is not called by the functions about which I wrote
in my newsgroup message. The functions that use parent.parent.f rames[0]
work just fine, but that is irrelevant so far as the under-discussion issue
is concerned.
Can I suggest that you look at the 'find position' stuff at
quirksmode:

<URL:http://www.quirksmode. org/js/findpos.html>

It provides a full, cross-browser solution in a few lines of code.
I did consult quirksmode before I wrote the code under discussion. It's
helpful, and when I ran alerts to find out what values were being passed, I
was able to see how to use them. Something else is at work here.
Your year text can be in a span that has a mouseover/out, use this.id
(where id provides a key to your tip text array) to determine the tip
text to show.
Actually, not. I use the same long messages again and again, sometimes more
than once on a given page, certainly many times over the course of different

HTML pages. By just passing a variable and letting the variable be
converted to a five-line, multi-sentence message within the .js file, I save
a great deal of space over what would be expended were I to repeat this text
in every <SPAN> (or <DIV>) where the mouseover/mouseout would occur.
That's it. Another suggestion is to put the tip div in the page as
HTML and use display: none to hide it by default, then use
mouseover/out to hide/show it at the appropriate location with
the appropriate text.

Same problem. The same messages are used on different pages.

In any event, I am not having problems passing those variables that
determine what text is to display. (Slight cavaet: I haven't figured out
how to convert the HTML &#nnn; characters into curled apostrophes and the
like.) The problem I'm having is that the tooltips are being displayed at
the location where the previous tooltip should be displayed, and the next
tooltip will display where the current one should have displayed. Again,
because IE is displaying them where they should display, the problem in
Firefox is not in my choice of the sequence of actions within my functions,
but rather the problem is in how some variable is being handled under the
hood, perhaps even some speed issue. Anyone know of instances where perhaps
Firefox gets ahead of itself and uses an old instance of a variable because
it didn't finish calculating the new one? This sounds peculiar, I know.

(As before, the link to my test page is
http://home.earthlink.net/~prodcode/...rTooltips.html. The Javascript
functions are in the file "functns.js " in the same directory.)

--
David Hayes

(remove the name of the programming language from email address to make it
usable)

[David Hayes]

The previous message was a false alarm! The error turns out to have been
attributable to a function that ran both before and after another one, so I
was assuming it was finished when the variables were giving the correct
returns even as the other behavior came to happen. Those interested in the
resolution can still look at the code. (The error message in IE no longer
occurs; that was attributable to a function call made from the body onload.
The whole <BODY> tag was copied from another file that did almost the same
thing, and I ignored the fact that in the test version being posted, the
prerequisites for the function being called would not be met by the abridged
version of the file in that the version being shared here was cut to deal
with only those functions that needed to be examined. Thus, an error was
given which pointed to a problem that didn't need to be addressed and merely
misled anyone not looking at the pertinent functions.)

How many times do we see in these newsgroups reports that another set of
eyes were needed to find the obvious or that one's own eyes are perfectly
adequate for finding the problem once sufficient time has elapsed for one to
become detached from the moment that the problem seemed insurmountable?

--
David Hayes

(remove the name of the programming language from email address to make it
usable)