Tooltip box

[Kim]

Using the code below am I able to display/hide a tooltip without any
problems, however once the tooltip is displayed its position is fixed
(based on where the mouse first hovered onto the object) and I would
like the tooltip to follow the mouse instead.
What must I change to do this ?


HTML
<a href="#" onMouseOver="sh owBox('help','t ext to display')"
onMouseOut="hid eBox('help')">t ext link</a>

JS
function hideLayer(strLa yer) {
if (document.getEl ementById) {
d = document.getEle mentById(strLay er);
if (d) {
d.style.visibil ity = 'hidden';
d.style.display = 'none';
}
}
else if (document.all) {
d = eval('document. all[\''+strLayer+'\ ']');
if (d) {
eval('document. all[\''+strLayer+'\ '].style.visibili ty = \'hidden
\'');
eval('document. all[\''+strLayer+'\ '].style.display = \'none\'');
}
}
}
function showLayer(strLa yer) {
if (document.getEl ementById) {
d = document.getEle mentById(strLay er);
d.style.visibil ity = 'visible';
d.style.display = 'block';
}
else if (document.all) {
eval('document. all[\''+strLayer+'\ '].style.visibili ty = \'visible
\'');
eval('document. all[\''+strLayer+'\ '].style.display = \'block\'');
}
}
function getObj(name) {
if (document.getEl ementById) {
this.obj = document.getEle mentById(name);
this.style = document.getEle mentById(name). style;
}
else if (document.all) {
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layer s) {
this.obj = document.layers[name];
this.style = document.layers[name];
}
return this;
}
document.onmous emove = getMousePositio n;
if (!document.all) document.captur eEvents(Event.M OUSEMOVE);
var mouse_x = 0;
var mouse_y = 0;
function getMousePositio n(e) {
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
mouse_x = e.pageX;
mouse_y = e.pageY;
}
else if (e.clientX || e.clientY) {
mouse_x = e.clientX + (document.docum entElement ?
document.docume ntElement.scrol lLeft : document.body.s crollLeft);
mouse_y = e.clientY + (document.docum entElement ?
document.docume ntElement.scrol lTop : document.body.s crollTop);
}
}
function showBox(name, msg) {
var x = (mouse_x + 20) + 'px';
var y = (mouse_y + 0) + 'px';
var box = getObj(name);

box.obj.innerHT ML = msg;
box.style.posit ion = 'absolute';
box.style.top = y;
box.style.left = x;
showLayer(name) ;
}
function hideBox(name) {
hideLayer(name) ;
}

[Robin]

Re: Tooltip box

Kim wrote:

Using the code below am I able to display/hide a tooltip without any
problems, however once the tooltip is displayed its position is fixed
(based on where the mouse first hovered onto the object) and I would
like the tooltip to follow the mouse instead.
What must I change to do this ?

There are many libraries to do this so why reinvent the wheel? Anyway,
the simplest change I can see:

var mouse_x = 0;
var mouse_y = 0;

var box = null; // moved to be a global

function getMousePositio n(e) {
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
mouse_x = e.pageX;
mouse_y = e.pageY;
}
else if (e.clientX || e.clientY) {
mouse_x = e.clientX + (document.docum entElement ?
document.docume ntElement.scrol lLeft : document.body.s crollLeft);
mouse_y = e.clientY + (document.docum entElement ?
document.docume ntElement.scrol lTop : document.body.s crollTop);
}

if (box) placeBox();

}
function showBox(name, msg) {

box = getObj(name); // note no 'var' using global
// should really be a check failure here

box.obj.innerHT ML = msg;
box.style.posit ion = 'absolute';

placeBox();

showLayer(name) ;
}
>
function hideBox(name) {
hideLayer(name) ;

box = null;

}
>

function placeBox() {
box.style.top = (mouse_x + 20) + 'px';
box.style.left = (mouse_y + 0) + 'px';
}

Robin

[David Mark]

Re: Tooltip box

On Nov 4, 9:32 am, Kim <kims...@gmail. comwrote:

Using the code below am I able to display/hide a tooltip without any
problems, however once the tooltip is displayed its position is fixed

Without any problems that you can see.

(based on where the mouse first hovered onto the object) and I would
like the tooltip to follow the mouse instead.

That is so irritating and pointless.

What must I change to do this ?
>
HTML
<a href="#" onMouseOver="sh owBox('help','t ext to display')"
onMouseOut="hid eBox('help')">t ext link</a>

Link goes nowhere? Might navigate to the top of the page in some
browsers.

>
JS
function hideLayer(strLa yer) {
        if (document.getEl ementById) {

Do not test host object methods in this manner. Use the typeof
operator. Search the group for "isHostMeth od".

                d = document.getEle mentById(strLay er);
                if (d) {
                        d.style.visibil ity = 'hidden';
                        d.style.display = 'none';
                }
        }
        else if (document.all) {

Here's where the wheels come off.

                d = eval('document. all[\''+strLayer+'\ ']');
                if (d) {
                        eval('document. all[\''+strLayer+'\ '].style.visibili ty = \'hidden
\'');
                        eval('document. all[\''+strLayer+'\ '].style.display = \'none\'');
                }
        }}

Where did you pick that up? If you find yourself using eval, you are
likely off in the weeds.

>
function showLayer(strLa yer) {
        if (document.getEl ementById) {
                d = document.getEle mentById(strLay er);
                d.style.visibil ity = 'visible';
                d.style.display = 'block';
        }
        else if (document.all) {
                eval('document. all[\''+strLayer+'\ '].style.visibili ty = \'visible
\'');
                eval('document. all[\''+strLayer+'\ '].style.display = \'block\'');
        }}

Same comments for this virtual duplication.

>
function getObj(name) {
        if (document.getEl ementById) {
                this.obj = document.getEle mentById(name);
                this.style = document.getEle mentById(name). style;
        }
        else if (document.all) {
                this.obj = document.all[name];
                this.style = document.all[name].style;
        }

No eval this time?

        else if (document.layer s) {
                this.obj = document.layers[name];
                this.style = document.layers[name];
        }

Clearly you can lose this branch. It is only for NN4 and makes no
sense in the context of this script.

        return this;}
>
document.onmous emove = getMousePositio n;

It is good practice to declare functions before their first use.

if (!document.all) document.captur eEvents(Event.M OUSEMOVE);

That might be the worst object inference (a form of browser sniffing)
I have ever seen. Where did you find this stuff?

var mouse_x = 0;
var mouse_y = 0;
function getMousePositio n(e) {
        if (!e) var e = window.event;

e = e || window.event;

        if (e.pageX || e.pageY) {

Wrong. What if both are 0?

                mouse_x = e.pageX;
                mouse_y = e.pageY;
        }
        else if (e.clientX || e.clientY) {

Same here.

                mouse_x = e.clientX + (document.docum entElement ?
document.docume ntElement.scrol lLeft : document.body.s crollLeft);

Wrong. The documentElement property is defined in quirks mode. You
should be testing the scrollLeft/Top properties.

                mouse_y = e.clientY + (document.docum entElement ?
document.docume ntElement.scrol lTop : document.body.s crollTop);
        }}

Same here.

>
function showBox(name, msg) {
        var x = (mouse_x + 20) + 'px';
        var y = (mouse_y + 0) + 'px';
        var box = getObj(name);
>
        box.obj.innerHT ML = msg;
        box.style.posit ion = 'absolute';
        box.style.top = y;
        box.style.left = x;
        showLayer(name) ;}
>
function hideBox(name) {
        hideLayer(name) ;
>
}
>
>

I advise you to look into the title attribute. Most browsers will
turn it into a tooltip. Furthermore, search engines, screen readers,
text browsers, etc. will be able to see the content. No script
required. That should save you a lot of trouble.

[David Mark]

Re: Tooltip box

On Nov 4, 10:01 am, Robin <a...@somewhere .comwrote:

Kim wrote:

Using the code below am I able to display/hide a tooltip without any
problems, however once the tooltip is displayed its position is fixed
(based on where the mouse first hovered onto the object) and I would
like the tooltip to follow the mouse instead.
What must I change to do this ?

>
There are many libraries to do this so why reinvent the wheel? Anyway,
the simplest change I can see:

Name one that is worthwhile. Wheels should be re-invented when
previous attempts fall short.

[David Mark]

Re: Tooltip box

On Nov 4, 5:30 pm, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
wrote:

[snip]

>
Why is scrolling down harder to follow than scrolling up?

Clearly it isn't. But one can scroll up (or search up or whatever)
knowing that the identifier will be defined above, so it eliminates
the step of looking in the other direction.

And with an Outline View the issue gets even smaller. *shrug*

I never use such things, so I don't know.

[rf]

Re: Tooltip box


"David Mark" <dmark.cinsoft@ gmail.comwrote in message
news:7a912b25-9457-434f-933c-e72f5e81fd4d@w1 g2000prk.google groups.com...
On Nov 4, 5:30 pm, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
wrote:

[snip]

>

>Why is scrolling down harder to follow than scrolling up?

Clearly it isn't. But one can scroll up (or search up or whatever)
knowing that the identifier will be defined above, so it eliminates
the step of looking in the other direction.

And if they are at the bottom one can scroll down (or search down or
whatever) knowing that the identifier will be defined below, so it
eliminates the step of looking in the other direction.

Also, down is the default search direction in my editors, I don't have to
change it.

When opening a file the overall top level logic is at the top, ready to
read. If the (hopefully static and never changed much) subroutines are at
the top instead one has to search for the overall top level logic. A PITA if
it is not inside a function itself.

[David Mark]

Re: Tooltip box

On Nov 4, 8:31 pm, "rf" <r...@invalid.c omwrote:

"David Mark" <dmark.cins...@ gmail.comwrote in message
>
news:7a912b25-9457-434f-933c-e72f5e81fd4d@w1 g2000prk.google groups.com...
On Nov 4, 5:30 pm, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
wrote:
>
[snip]
>
>
>

Why is scrolling down harder to follow than scrolling up?

Clearly it isn't.  But one can scroll up (or search up or whatever)
knowing that the identifier will be defined above, so it eliminates
the step of looking in the other direction.

>
And if they are at the bottom one can scroll down (or search down or

If you put your function declarations after the first use as a rule,
then that should work for you. Seems an odd choice though.

[snip]

[Kim]

Re: Tooltip box

On Nov 4, 4:01 pm, Robin <a...@somewhere .comwrote:

Kim wrote:

Using the code below am I able to display/hide a tooltip without any
problems, however once the tooltip is displayed its position is fixed
(based on where the mouse first hovered onto the object) and I would
like the tooltip to follow the mouse instead.
What must I change to do this ?

>
There are many libraries to do this so why reinvent the wheel? Anyway,
the simplest change I can see:
>

var mouse_x = 0;
var mouse_y = 0;

>
var box = null; // moved to be a global
>

function getMousePositio n(e) {
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
mouse_x = e.pageX;
mouse_y = e.pageY;
}
else if (e.clientX || e.clientY) {
mouse_x = e.clientX + (document.docum entElement ?
document.docume ntElement.scrol lLeft : document.body.s crollLeft);
mouse_y = e.clientY + (document.docum entElement ?
document.docume ntElement.scrol lTop : document.body.s crollTop);
}

>
if (box) placeBox();
>

}
function showBox(name, msg) {

>
box = getObj(name); // note no 'var' using global
// should really be a check failure here box.obj.innerHT ML = msg;

box.style.posit ion = 'absolute';

placeBox();

showLayer(name) ;
}

>

>
function hideBox(name) {
hideLayer(name) ;

box = null;

}
>

>
function placeBox() {
box.style.top = (mouse_x + 20) + 'px';
box.style.left = (mouse_y + 0) + 'px';
>
}
>
Robin

Thanks Robin. Works fine.

For the record, I know of two scripts that also can do this (+ a lot
more).
1) www.bosrup.com/web/overlib/
2) http://walterzorn.com/tooltip/tooltip_e.htm
I would never use overLIB as it uses incorrect tables (yes, plural) to
create its tooltip. And I am in fact looking into 2) due to its
extension possibilities.
I used an empty div container as it allows me to apply class/styles to
it without having to hardcode it into the JS function or as a
parameter.

David: Im just a novice JS coder, so when the code works then thats
all that matters. If you can provide an example of these changes you
suggest, please do.
The empty link was just for testing. Im using an image instead and I
dont use the title attribute as my text will most likely be longer
than the what it allows (I have seen it cut off text).

[Robin]

Re: Tooltip box

David Mark wrote:

On Nov 4, 10:01 am, Robin <a...@somewhere .comwrote:

>Kim wrote:

>>Using the code below am I able to display/hide a tooltip without any
>>problems, however once the tooltip is displayed its position is fixed
>>(based on where the mouse first hovered onto the object) and I would
>>like the tooltip to follow the mouse instead.
>>What must I change to do this ?

>There are many libraries to do this so why reinvent the wheel? Anyway,
>the simplest change I can see:

>
Name one that is worthwhile. Wheels should be re-invented when
previous attempts fall short.

As Kim says, overLIB (http://www.bosrup.com/web/overlib/)

Robin

[Thomas 'PointedEars' Lahn]

Re: Tooltip box

Robin wrote:

David Mark wrote:

>On Nov 4, 10:01 am, Robin <a...@somewhere .comwrote:

>>Kim wrote:
>>>Using the code below am I able to display/hide a tooltip without any
>>>problems, however once the tooltip is displayed its position is fixed
>>>(based on where the mouse first hovered onto the object) and I would
>>>like the tooltip to follow the mouse instead.
>>>What must I change to do this ?
>>There are many libraries to do this so why reinvent the wheel? Anyway,
>>the simplest change I can see:

>Name one that is worthwhile. Wheels should be re-invented when
>previous attempts fall short.

>
As Kim says, overLIB (http://www.bosrup.com/web/overlib/)

Have you reviewed the source code? I just did. From the looks of it, it is
just another "library" junk put together by novice script monkeys. Browser
sniffing (they call that "Stupidity Check(tm)", how fitting) and unnecessary
eval() to assemble property access syntax are only some of its problems.

As such, it is easily being recommended by script-kiddies, of course.


PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>

[David Mark]

Re: Tooltip box

On Nov 5, 4:27 am, Robin <a...@somewhere .comwrote:

David Mark wrote:

On Nov 4, 10:01 am, Robin <a...@somewhere .comwrote:

Kim wrote:
>Using the code below am I able to display/hide a tooltip without any
>problems, however once the tooltip is displayed its position is fixed
>(based on where the mouse first hovered onto the object) and I would
>like the tooltip to follow the mouse instead.
>What must I change to do this ?
There are many libraries to do this so why reinvent the wheel? Anyway,
the simplest change I can see:

>

Name one that is worthwhile.  Wheels should be re-invented when
previous attempts fall short.

>
As Kim says, overLIB (http://www.bosrup.com/web/overlib/)

First mention I have seen of it (though I definitely saw it coming.)

No. Just no.

[Gregor Kofler]

Re: Tooltip box

Robin meinte:

David Mark wrote:

>On Nov 4, 10:01 am, Robin <a...@somewhere .comwrote:

>>Kim wrote:
>>>Using the code below am I able to display/hide a tooltip without any
>>>problems, however once the tooltip is displayed its position is fixed
>>>(based on where the mouse first hovered onto the object) and I would
>>>like the tooltip to follow the mouse instead.
>>>What must I change to do this ?
>>There are many libraries to do this so why reinvent the wheel? Anyway,
>>the simplest change I can see:

>>
>Name one that is worthwhile. Wheels should be re-invented when
>previous attempts fall short.

>
As Kim says, overLIB (http://www.bosrup.com/web/overlib/)

Yikes. "Extensive" browser sniffing, a thoroughly polluted global
namespace, clumsy string operations for generating innerHTML (which in
turn uses "styling" attributes [1]), eval() all over the place,
inefficient code [2]...

And this whole crap for (usually expendable) tooltips - puhleeze!

Gregor


[1]
txt='<table width="'+o3_wid th+'" border="0" cellpadding="0"
cellspacing="0" height="'+o3_he ight+'"><tr><td colspan="3"
height="'+o3_pa dyt+'"></td></tr><tr><td width="'+o3_pad xl+'"></td><td
valign="TOP" width="'+(o3_wi dth-o3_padxl-o3_padxr)+(o3_t extfontclass ?
'" class="'+o3_tex tfontclass : '')+'">'+(o3_te xtfontclass ? '' :
wrapStr(0,o3_te xtsize,'text')) +text+(o3_textf ontclass ? '' :
wrapStr(1,o3_te xtsize))+'</td><td width="'+o3_pad xr+'"></td></tr><tr><td
colspan="3" height="'+o3_pa dyb+'"></td></tr></table>';

[2]
// Note: NS4 doesn't like switch cases with vars.
if (ar[i] >= pmCount || ar[i]==DONOTHING) { continue; }
if (ar[i]==INARRAY) { fnMark = 0;
eval(pf+'text=o l_texts['+ar[++i]+'].toString()'); continue; }
if (ar[i]==CAPARRAY) { eval(pf+'cap=ol _caps['+ar[++i]+'].toString()');
continue; }
if (ar[i]==STICKY) { if (pf!='ol_') eval(pf+'sticky =1'); continue; }
if (ar[i]==BACKGROUND) { eval(pf+'backgr ound="'+ar[++i]+'"'); continue; }
if (ar[i]==NOCLOSE) { if (pf!='ol_') opt_NOCLOSE(); continue; }
if (ar[i]==CAPTION) { eval(pf+"cap='" +escSglQuote(ar[++i])+"'");
continue; }

[another fifty or sixty lines of if() { eval(); continue; } follow]