2

私は自分のプロジェクトでこのツールチップを使用しましたが、問題は、固定された場所ではなく、ホバーした場所にツールチップを表示する必要があることです。現在、固定された場所に表示されています。ホバーした場所にツールチップを表示する必要があります。

どうすればこのコードをレタッチしてそうすることができますか

  /* Position the tooltip relative to the class 
       associated with the tooltip                */  
    setTip = function(top, left){  
        var topOffset = tip.height();  
        var xTip = (left-30)+"px";  
        var yTip = (top-topOffset-60)+"px";  
        tip.css({'top' : yTip, 'left' : xTip});  
    }

完全なコードはここにあります

  $.fn.betterTooltip = function(options){

/* Setup the options for the tooltip that can be 
   accessed from outside the plugin              */
var defaults = {
    speed: 200,
    delay: 300
};

var options = $.extend(defaults, options);

/* Create a function that builds the tooltip 
   markup. Then, prepend the tooltip to the body */
getTip = function() {
    var tTip = 
        "<div class='tip'>" +
            "<div class='tipMid'>"  +
            "</div>" +
            "<div class='tipBtm'></div>" +
        "</div>";
    return tTip;
}
$("body").prepend(getTip());

/* Give each item with the class associated with 
   the plugin the ability to call the tooltip    */
$(this).each(function(){

    var $this = $(this);
    var tip = $('.tip');
    var tipInner = $('.tip .tipMid');

    var tTitle = (this.title);
    this.title = "";

    var offset = $(this).offset();
    var tLeft = offset.left;
    var tTop = offset.top;
    var tWidth = $this.width();
    var tHeight = $this.height();

    /* Mouse over and out functions*/
    $this.hover(
        function() {
            tipInner.html(tTitle);
            setTip(tTop, tLeft);
            setTimer();
        }, 
        function() {
            stopTimer();
            tip.hide();
        }
    );         

    /* Delay the fade-in animation of the tooltip */
    setTimer = function() {
        $this.showTipTimer = setInterval("showTip()", defaults.delay);
    }

    stopTimer = function() {
        clearInterval($this.showTipTimer);
    }

    /* Position the tooltip relative to the class 
       associated with the tooltip                */
    setTip = function(top, left){
        var topOffset = tip.height();
        var xTip = (left-30)+"px";
        var yTip = (top-topOffset-60)+"px";
        tip.css({'top' : yTip, 'left' : xTip});
    }

    /* This function stops the timer and creates the
       fade-in animation                          */
    showTip = function(){
        stopTimer();
        tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);
    }
});
    };
4

2 に答える 2

4

.hover（handlerIn、handlerOut）は、.mouseenter（handlerIn）.mouseleave（handlerOut）の略です。これは、mousenter（）のマウス座標にアクセスできることを意味します。

ホバーエントリポイントのマウス座標を使用するように.hoverバインディングを変更します。

/* Mouse over and out functions*/
$this.hover(
    function(e) {
        tipInner.html(tTitle);
        setTip(e.clientY, e.clientX);  //<--- using mouseenter coords here
        setTimer();
    }, 
    function() {
        stopTimer();
        tip.hide();
    }
).mousemove (function(e) {
    setTip(e.pageY, e.pageX);
});
于 2012-05-31T15:44:42.323 に答える
2

静的なdiv座標の代わりにマウス座標を指定します。

$(document).mousemove (function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
});

jQueryドキュメント：http ：//docs.jquery.com/Tutorials：Mouse_Position

于 2012-05-31T15:30:12.570 に答える