Jquery 中的工具提示

Question

今天我试图构建一个工具提示，它将显示在鼠标指针下方并随之移动。为此，我在下面编写了代码。 demo

HTML:

<body bgcolor="#4679BD">
   <div class="pointer_tooltip"> 
      Hi am a crazy tooltip
   </div>
</body>

CSS:

.pointer_tooltip{
   width : auto;
   height : auto;
   padding : 10px;
   border-radius : 5px;
   background-color : #fff;
   position: absolute;
}

Jquery:

$(document).mousemove(function( event ) {
    var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";     

    var position_top = event.pageY+18;
    var position_left = event.pageX-30;

    $('.pointer_tooltip').css('top',position_top+'px');
    $('.pointer_tooltip').css('left',position_left+'px');
});

这工作正常，但每当我将指针移到左侧我的工具提示时，他就会隐藏起来，如下图所示

每当我向右移动它时，它看起来像这样

我想要的是每当我向左或向右移动时，工具提示应该逐个像素地分别向右和向左移动

Answer 1

试试这个代码：-

$(document).mousemove(function( event ) {
    var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";   

    //set the actuall width
    $('.pointer_tooltip').width($('.pointer_tooltip').width());
    var position_top = event.pageY+18;
    var position_left = event.pageX-60;          
    var width=$('body').width()-$('.pointer_tooltip').width();

    //check if left not minus
    if(position_left<0){
      position_left=10;
    }else if(position_left > width){
     position_left=width-10;
    }       


    $('.pointer_tooltip').css('top',position_top+'px');
    $('.pointer_tooltip').css('left',position_left+'px');
});

Demo

Jquery 中的工具提示

tooltip in Jquery

jquery

css

tooltip