Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post

    Jquery based Tooltip

    Hi,
    I have this code from once existed site sohtanaka.com which got hacked and now doesn't exist anymore (has highly effected many people who used to follow it).
    Well I am not able to understand how to make the tooltip appear next to my mouse pointer, in the script below there are many widths and heights. Not even that there are + (plus sign) and - (minus sign). So its confusing me, If someone could explain the co-ordinates, so I could use it properly.

    If I have to be more specific I am not able to understand these four lines of code all other is understandable

    Code:
    var mousex = e.pageX + 50; //Get X coodrinates
            var mousey = e.pageY  - 340; //Get Y coordinates
    and these two
    Code:
    if ( tipVisX < 90 ) { //If tooltip exceeds the X coordinate of viewport
                mousex = e.pageX - tipWidth - 90;
            } if ( tipVisY < 90 ) { //If tooltip exceeds the Y coordinate of viewport
                mousey = e.pageY - tipHeight - 90;
            }
    Code:
    <script type="text/javascript">
    $(document).ready(function() {
        //Tooltips
        $(".tip_trigger").hover(function(){
            tip = $(this).find('.tip');
            tip.show(); //Show tooltip
        }, function() {
            tip.hide(); //Hide tooltip
        }).mousemove(function(e) {
            var mousex = e.pageX + 50; //Get X coodrinates
            var mousey = e.pageY  - 340; //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() - (mousex + tipWidth);
            //Distance of element from the bottom of viewport
            var tipVisY = $(window).height() - (mousey + tipHeight);
    
            if ( tipVisX < 90 ) { //If tooltip exceeds the X coordinate of viewport
                mousex = e.pageX - tipWidth - 90;
            } if ( tipVisY < 90 ) { //If tooltip exceeds the Y coordinate of viewport
                mousey = e.pageY - tipHeight - 90;
            }
            //Absolute position the tooltip according to mouse position
            tip.css({  top: mousey, left: mousex });
        });
    });
    </script>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    e.pageX and e.pageY will give you the coordinates of the mouse relative to the document (e is the event object which will automatically be handed over to the method). It adds 50 to the x coordinate and substracts 340 from the y coordinate to place the tooltip to the right top of the mouse coordinates.

    The second set of lines just checks if the tooltip still fits on the screen (if it's too far right or down) and otherwise correct the coordinates accordingly

  • #3
    New to the CF scene
    Join Date
    May 2012
    Location
    Norway :)
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If interested in a jquery tooltip called qtip2 that works great and is greatly supported.

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    I like qTip2, and I also like overLib. Very easy to implement either of them.

    ^_^

  • #5
    New to the CF scene
    Join Date
    May 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Friends, Instead of going for JQuery Tool Tips, why can't you try CSS3 based tool tip. So that the page and tool tips will load faster. Check this CSS3 tool tip


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •