WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > PROGRAMMING LANGUAGES > Scripting and Server Side > X and Y co-ordinates of tooltip in jquery

 
  Thread Tools Display Modes
Prev Previous Post   Next Post Next
Old 21st April 12, 05:46 PM   #1
cryoffalcon
WLC Lover
 
Join Date: Mar 2012
Posts: 53
Default X and Y co-ordinates of tooltip in jquery

Hi,
I am using a tooltip of once existed Sohtanaka (feel really bad about his lost), I have messed up (I think) the co-ordinates.
Can someone tell me how to make it work again as right now the image appears 100 feet away (not really 100 feet )
Here is the HTML

Code:
 <li class="tip_trigger"><span class="tip"><img class="imagesizer" alt="300 Grams" src="https://lh5.googleusercontent.com/-qCRpwQt-W0A/Ty_3C0_uKMI/AAAAAAAAAAc/EFp-Ih7Mwo0/s90/300%2520.jpg" /></span><a href="#">Alex</a></li>
Here is the script

Code:
&lt;script type=&quot;text/javascript&quot;&gt;
    $(document).ready(function() {
        //Tooltips
        $(&quot;.tip_trigger&quot;).hover(function(){
            tip = $(this).find('.tip');
            tip.show(); //Show tooltip
        }, function() {
            tip.hide(); //Hide tooltip
        }).mousemove(function(e) {
            var mou*** = e.pageX + -50; //Get X coodrinates
            var mousey = e.pageY + -50; //Get Y coordinates
            var tipWidth = tip.width(); //Find width of tooltip
            var tipHeight = tip.height(); //Find height of tooltip
    
            //Distance of element from the right edge of viewport
            var tipVisX = $(window).width() - (mou*** + tipWidth);
            //Distance of element from the bottom of viewport
            var tipVisY = $(window).height() - (mousey + tipHeight);
    
            if ( tipVisX &lt; 0 ) { //If tooltip exceeds the X coordinate of viewport
                mou*** = e.pageX - tipWidth - 140;
            } if ( tipVisY &lt; 0 ) { //If tooltip exceeds the Y coordinate of viewport
                mousey = e.pageY - tipHeight - 140;
            }
            //Absolute position the tooltip according to mouse position
            tip.css({  top: mousey, left: mou*** });
        });
    });
    &lt;/script&gt;
and this is the CSS

Code:
.tip {
    width:90px;
    height:90px;
        color: #000000;
        background:#2B221B;
        display:none; /*--Hides by default--*/
        padding:10px;
        position:absolute;    z-index:1000;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }
you can see the live example of test here : http://bloghutsbeta.blogspot.com/201...slidernav.html
The tooltip is only applied to the first one in 'A' category (tooltip only appears if your pointer is in A categories ALEX)
cryoffalcon is offline   Reply With Quote
 


Thread Tools
Display Modes
Threaded Mode Threaded Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:19 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyright© 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.