Tooltip box

Discussion in 'Javascript' started by Kim, Nov 4, 2008.

  1. Kim

    Kim Guest

    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="showBox('help','text to display')"
    onMouseOut="hideBox('help')">text link</a>

    JS
    function hideLayer(strLayer) {
    if (document.getElementById) {
    d = document.getElementById(strLayer);
    if (d) {
    d.style.visibility = 'hidden';
    d.style.display = 'none';
    }
    }
    else if (document.all) {
    d = eval('document.all[\''+strLayer+'\']');
    if (d) {
    eval('document.all[\''+strLayer+'\'].style.visibility = \'hidden
    \'');
    eval('document.all[\''+strLayer+'\'].style.display = \'none\'');
    }
    }
    }
    function showLayer(strLayer) {
    if (document.getElementById) {
    d = document.getElementById(strLayer);
    d.style.visibility = 'visible';
    d.style.display = 'block';
    }
    else if (document.all) {
    eval('document.all[\''+strLayer+'\'].style.visibility = \'visible
    \'');
    eval('document.all[\''+strLayer+'\'].style.display = \'block\'');
    }
    }
    function getObj(name) {
    if (document.getElementById) {
    this.obj = document.getElementById(name);
    this.style = document.getElementById(name).style;
    }
    else if (document.all) {
    this.obj = document.all[name];
    this.style = document.all[name].style;
    }
    else if (document.layers) {
    this.obj = document.layers[name];
    this.style = document.layers[name];
    }
    return this;
    }
    document.onmousemove = getMousePosition;
    if (!document.all) document.captureEvents(Event.MOUSEMOVE);
    var mouse_x = 0;
    var mouse_y = 0;
    function getMousePosition(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.documentElement ?
    document.documentElement.scrollLeft : document.body.scrollLeft);
    mouse_y = e.clientY + (document.documentElement ?
    document.documentElement.scrollTop : document.body.scrollTop);
    }
    }
    function showBox(name, msg) {
    var x = (mouse_x + 20) + 'px';
    var y = (mouse_y + 0) + 'px';
    var box = getObj(name);

    box.obj.innerHTML = msg;
    box.style.position = 'absolute';
    box.style.top = y;
    box.style.left = x;
    showLayer(name);
    }
    function hideBox(name) {
    hideLayer(name);
    }
     
    Kim, Nov 4, 2008
    #1
    1. Advertising

  2. Kim

    Robin Guest

    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 getMousePosition(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.documentElement ?
    > document.documentElement.scrollLeft : document.body.scrollLeft);
    > mouse_y = e.clientY + (document.documentElement ?
    > document.documentElement.scrollTop : document.body.scrollTop);
    > }


    if (box) placeBox();

    > }
    > function showBox(name, msg) {

    box = getObj(name); // note no 'var' using global
    // should really be a check failure here
    > box.obj.innerHTML = msg;
    > box.style.position = '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
     
    Robin, Nov 4, 2008
    #2
    1. Advertising

  3. Kim

    David Mark Guest

    On Nov 4, 9:32 am, 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


    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="showBox('help','text to display')"
    > onMouseOut="hideBox('help')">text link</a>


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

    >
    > JS
    > function hideLayer(strLayer) {
    >         if (document.getElementById) {


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

    >                 d = document.getElementById(strLayer);
    >                 if (d) {
    >                         d.style.visibility = '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.visibility = \'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(strLayer) {
    >         if (document.getElementById) {
    >                 d = document.getElementById(strLayer);
    >                 d.style.visibility = 'visible';
    >                 d.style.display = 'block';
    >         }
    >         else if (document.all) {
    >                 eval('document.all[\''+strLayer+'\'].style.visibility = \'visible
    > \'');
    >                 eval('document.all[\''+strLayer+'\'].style.display = \'block\'');
    >         }}


    Same comments for this virtual duplication.

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


    No eval this time?

    >         else if (document.layers) {
    >                 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.onmousemove = getMousePosition;


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

    > if (!document.all) document.captureEvents(Event.MOUSEMOVE);


    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 getMousePosition(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.documentElement ?
    > document.documentElement.scrollLeft : document.body.scrollLeft);


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

    >                 mouse_y = e.clientY + (document.documentElement ?
    > document.documentElement.scrollTop : document.body.scrollTop);
    >         }}


    Same here.

    >
    > function showBox(name, msg) {
    >         var x = (mouse_x + 20) + 'px';
    >         var y = (mouse_y + 0) + 'px';
    >         var box = getObj(name);
    >
    >         box.obj.innerHTML = msg;
    >         box.style.position = '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, Nov 4, 2008
    #3
  4. Kim

    David Mark Guest

    On Nov 4, 10:01 am, Robin <> wrote:
    > 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, Nov 4, 2008
    #4
  5. David Mark wrote:
    > Kim wrote:
    >> return this;}
    >>
    >> document.onmousemove = getMousePosition;

    >
    > It is good practice to declare functions before their first use.
    >
    > [...]
    >> function getMousePosition(e) {


    If so, that practice is at least not supported by language rules: All
    declarations are instantiated *before* execution, so order does not matter.

    I found that with languages like this some people declare their functions on
    the bottom, presumably so that the main code can be edited easier. I
    haven't done that yet, but I see no good reason why I shouldn't. Can you
    name one?


    PointedEars
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
     
    Thomas 'PointedEars' Lahn, Nov 4, 2008
    #5
  6. Kim

    David Mark Guest

    On Nov 4, 5:03 pm, Thomas 'PointedEars' Lahn <>
    wrote:
    > David Mark wrote:
    > > Kim wrote:
    > >>         return this;}

    >
    > >> document.onmousemove = getMousePosition;

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

    >
    > > [...]
    > >> function getMousePosition(e) {

    >
    > If so, that practice is at least not supported by language rules:  All
    > declarations are instantiated *before* execution, so order does not matter.


    No kidding.

    >
    > I found that with languages like this some people declare their functionson
    > the bottom, presumably so that the main code can be edited easier.  I
    > haven't done that yet, but I see no good reason why I shouldn't.  Can you
    > name one?


    Harder to follow for one.
     
    David Mark, Nov 4, 2008
    #6
  7. David Mark wrote:
    > Thomas 'PointedEars' Lahn wrote:
    >> David Mark wrote:
    >>> Kim wrote:
    >>>> return this;}
    >>>> document.onmousemove = getMousePosition;
    >>> It is good practice to declare functions before their first use.
    >>> [...]
    >>>> function getMousePosition(e) {

    >> If so, that practice is at least not supported by language rules: All
    >> declarations are instantiated *before* execution, so order does not matter.

    >
    > No kidding.
    >
    >> I found that with languages like this some people declare their functions on
    >> the bottom, presumably so that the main code can be edited easier. I
    >> haven't done that yet, but I see no good reason why I shouldn't. Can you
    >> name one?

    >
    > Harder to follow for one.


    Why is scrolling down harder to follow than scrolling up?
    And with an Outline View the issue gets even smaller. *shrug*


    PointedEars
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
     
    Thomas 'PointedEars' Lahn, Nov 4, 2008
    #7
  8. Kim

    David Mark Guest

    On Nov 4, 5:30 pm, Thomas 'PointedEars' Lahn <>
    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.
     
    David Mark, Nov 5, 2008
    #8
  9. Kim

    rf Guest

    "David Mark" <> wrote in message
    news:...
    On Nov 4, 5:30 pm, Thomas 'PointedEars' Lahn <>
    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.
     
    rf, Nov 5, 2008
    #9
  10. Kim

    David Mark Guest

    On Nov 4, 8:31 pm, "rf" <> wrote:
    > "David Mark" <> wrote in message
    >
    > news:...
    > On Nov 4, 5:30 pm, Thomas 'PointedEars' Lahn <>
    > 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]
     
    David Mark, Nov 5, 2008
    #10
  11. Kim

    Kim Guest

    On Nov 4, 4:01 pm, Robin <> wrote:
    > 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 getMousePosition(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.documentElement ?
    > > document.documentElement.scrollLeft : document.body.scrollLeft);
    > > mouse_y = e.clientY + (document.documentElement ?
    > > document.documentElement.scrollTop : document.body.scrollTop);
    > > }

    >
    > if (box) placeBox();
    >
    > > }
    > > function showBox(name, msg) {

    >
    > box = getObj(name); // note no 'var' using global
    > // should really be a check failure here> box.obj.innerHTML = msg;
    > > box.style.position = '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).
     
    Kim, Nov 5, 2008
    #11
  12. Kim

    Robin Guest

    David Mark wrote:
    > On Nov 4, 10:01 am, Robin <> wrote:
    >> 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
     
    Robin, Nov 5, 2008
    #12
  13. Robin wrote:
    > David Mark wrote:
    >> On Nov 4, 10:01 am, Robin <> wrote:
    >>> 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>
     
    Thomas 'PointedEars' Lahn, Nov 5, 2008
    #13
  14. Kim

    David Mark Guest

    On Nov 5, 4:27 am, Robin <> wrote:
    > David Mark wrote:
    > > On Nov 4, 10:01 am, Robin <> wrote:
    > >> 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.
     
    David Mark, Nov 5, 2008
    #14
  15. Robin meinte:
    > David Mark wrote:
    >> On Nov 4, 10:01 am, Robin <> wrote:
    >>> 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_width+'" border="0" cellpadding="0"
    cellspacing="0" height="'+o3_height+'"><tr><td colspan="3"
    height="'+o3_padyt+'"></td></tr><tr><td width="'+o3_padxl+'"></td><td
    valign="TOP" width="'+(o3_width-o3_padxl-o3_padxr)+(o3_textfontclass ?
    '" class="'+o3_textfontclass : '')+'">'+(o3_textfontclass ? '' :
    wrapStr(0,o3_textsize,'text'))+text+(o3_textfontclass ? '' :
    wrapStr(1,o3_textsize))+'</td><td width="'+o3_padxr+'"></td></tr><tr><td
    colspan="3" height="'+o3_padyb+'"></td></tr></table>';

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

    [another fifty or sixty lines of if() { eval(); continue; } follow]
     
    Gregor Kofler, Nov 6, 2008
    #15
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?U2hpanUgUG95aWxpbA==?=

    Adding tooltip tip tp list box

    =?Utf-8?B?U2hpanUgUG95aWxpbA==?=, Jul 19, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    9,337
    John Saunders
    Jul 19, 2004
  2. Radu
    Replies:
    1
    Views:
    549
    Bruce Barker
    Jan 8, 2007
  3. M P

    Tooltip on Dropdown (Combo Box)

    M P, May 2, 2006, in forum: ASP General
    Replies:
    4
    Views:
    189
    Mike Brind
    May 2, 2006
  4. hiroshi ochi
    Replies:
    3
    Views:
    302
    Hiroshi Ochi
    May 13, 2004
  5. nagesh
    Replies:
    1
    Views:
    107
    Vladdy
    Apr 23, 2005
Loading...

Share This Page