SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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. #2
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This is not a direct answer to your question, but sometimes I save the entire html page of good info so I'll still have it in case it gets taken down.


Tags for this Thread

Bookmarks

Posting Permissions

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