How to determine tooltip coordinates?

Discussion in 'Javascript' started by optimistx, Dec 8, 2009.

  1. optimistx

    optimistx Guest

    When mousing over an html-element I want to show a tooltip with images. How
    to
    set the coordinates of the tooltip element so that the tooltip element is
    totally visible
    in a scrolled window in all commonly used browsers?

    A short code example without using any libraries?
     
    optimistx, Dec 8, 2009
    #1
    1. Advertising

  2. On Tue, 08 Dec 2009 10:15:33 +0200, optimistx wrote:

    > When mousing over an html-element I want to show a tooltip with images.
    > How to
    > set the coordinates of the tooltip element so that the tooltip element
    > is totally visible
    > in a scrolled window in all commonly used browsers?
    >
    > A short code example without using any libraries?


    I just happened to write some tool-tip code recently.

    I snagged some code from this group to get the viewport size as well as
    the scroll position ... that does the hard part.

    So my code looks like this:

    (Untested cut and paste from far more complicated production code)

    Assumes the popup is called popup.

    Been tested on every browser ie6+ vintage and up I can get my hands on.
    I don't know of any potential browser trouble.


    function popup(event) {
    if (!event) event = window.event; // Handle MSHTML


    // Display or create your popup here.
    var styleRef = windowState.getStyleObj("popup");
    var positionMod = windowState.positionMod(styleRef);

    var getScrollY = windowState.getScrollY();
    var getScrollX = windowState.getScrollX();
    var posx;
    var posy;

    if (event === null) { // Should center the div instead
    posx = getScrollX ;
    posy = getScrollY;
    } else {
    posx = getScrollX + event.clientX;
    posy = getScrollY + event.clientY;
    }

    // At this point, my code checks the height and width of the popup to
    // make sure it doesn't overlap the screen and moves it left/up as
    // needed, then checks to make sure it isn't off the screen in the
    // other direction.


    styleRef.top=posy+positionMod;
    styleRef.left=posx+positionMod;

    }



    var windowState = (function(){
    // http://groups.google.com/group/comp.lang.javascript/browse_thread/
    thread/53d13bf56552daea/2493378ecfd31f95?q=center+div+on+viewport
    +group:*javascript#2493378ecfd31f95

    var readScroll = {scrollLeft:0,scrollTop:0};
    var readSize = {clientWidth:0,clientHeight:0};
    var readScrollX = 'scrollLeft';
    var readScrollY = 'scrollTop';
    var readWidth = 'clientWidth';
    var readHeight = 'clientHeight';
    function otherWindowTest(obj){
    if((document.compatMode)&&
    (document.compatMode == 'CSS1Compat')&&
    (document.documentElement)){
    return document.documentElement;
    }else if(document.body){
    return document.body;
    }else{
    return obj;
    }
    };
    if((typeof this.innerHeight == 'number')&&
    (typeof this.innerWidth == 'number')){
    readSize = this;
    readWidth = 'innerWidth';
    readHeight = 'innerHeight';
    }else{
    readSize = otherWindowTest(readSize);
    }
    if((typeof this.pageYOffset == 'number')&&
    (typeof this.pageXOffset == 'number')){
    readScroll = this;
    readScrollY = 'pageYOffset';
    readScrollX = 'pageXOffset';
    }else{
    readScroll = otherWindowTest(readScroll);
    }
    return {
    getScrollX:function(){
    return (readScroll[readScrollX]||0);
    },
    getScrollY:function(){
    return (readScroll[readScrollY]||0);
    },
    getWidth:function(){
    return (readSize[readWidth]||0);
    },
    getHeight:function(){
    return (readSize[readHeight]||0);
    },
    getStyleObj:function(id) {
    var obj = null;
    if(document.getElementById){
    obj = document.getElementById(id);
    }else if(document.all){
    obj = document.all[id];
    }else if(document.layers){
    obj = document.layers[id];
    }
    return (obj && obj.style) || obj;
    },
    positionMod:function(elementStyleRef) {
    return (typeof elementStyleRef.top == 'string')?"px":0;
    }

    };
    })();
     
    Jeremy J Starcher, Dec 9, 2009
    #2
    1. Advertising

  3. optimistx

    optimistx Guest

    Jeremy J Starcher wrote:

    > I just happened to write some tool-tip code recently.
    >
    > I snagged some code from this group to get the viewport size as well
    > as the scroll position ... that does the hard part.


    Thanks a lot! Yes, the hard part is really that. I'll look and modify the
    code during the next weeks and might show a link to the results here.
     
    optimistx, Dec 11, 2009
    #3
    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. Replies:
    1
    Views:
    21,534
    Jim Gibson
    Nov 4, 2003
  2. Suresh  Kumar
    Replies:
    0
    Views:
    614
    Suresh Kumar
    Jul 3, 2003
  3. Suresh  Kumar
    Replies:
    0
    Views:
    528
    Suresh Kumar
    Jul 4, 2003
  4. Radu
    Replies:
    1
    Views:
    578
    Bruce Barker
    Jan 8, 2007
  5. Peña, Botp
    Replies:
    1
    Views:
    254
    Robert Klemme
    Jan 24, 2004
Loading...

Share This Page