我想使用jQuery的工具提示插件來擴大一些圖像縮略圖，並顯示當有人懸停在縮略圖上的全尺寸圖像。然而，這很刺激，即使鼠標保持靜止，工具提示在被固定在一個地方之前跳過2-3次。jquery工具提示是非常跳動

這是爲什麼？有沒有辦法解決它？

HTML代碼：

<ul class="gallery" id="gallery"> 
    <li> 
      <img src="<?=site_url('images/Balloon Fest..jpg');?>" class="galleryImg" /> 
    </li> 
</ul>

的Javascript：

$(".galleryImg").tooltip({ 
      delay: 0, 
      showURL: false, 
      bodyHandler: function() { 
       return $("<img/>").attr("src", this.src) 
        .attr('width', 300).attr('height', 300); 
      } 
     });

來源

2012-05-16 Click Upvote

您使用的是什麼插件？ –

@RicardoLohmann http://jquery.bassistance.de/tooltip/demo/ –

你能展示你的代碼嗎？ –

我用同樣的jQuery插件，但它給了我一些問題，大量元素在同一頁上。測試一些之後，我選擇了這一個：

你可以看到一個工作demo here!

和網頁鏈接Here!

EDITED

按照要求對評論，這裏你有一個基於上述插件的jQuery擴展：

JQUERY

(function($) { 
    $.fn.tooltipImg = function(options) { 

    // options  
    var opts = $.extend({}, $.fn.tooltipImg.defaults, options); 

    // when the mouse gets over the element 
    $(this).hover(function(e){ 

     this.t = this.alt; 

     var c = (this.t != "") ? "<br/>" + this.t : "", 
      src = ($(this).data("src")!='') ? $(this).data("src") : this.src, 
      res = '<p class="'+opts.wrapper+'"><img src="'+src+'" alt="Image preview" />'+c+'<p>'; 

     $("body").append(res); 

     $("."+opts.wrapper) 
     .css({ 
      "top" : (e.pageY - opts.xOffset) + "px", 
      "left" : (e.pageX + opts.yOffset) + "px" 
     }) 
     .fadeIn("fast");      
     }, 
     function(){ 
     $("."+opts.wrapper).remove(); 
     }); 

     // when the mouse moves while over the element 
     $(this).mousemove(function(e){ 
     $("."+opts.wrapper) 
      .css({ 
      "top" : (e.pageY - opts.xOffset) + "px", 
      "left" : (e.pageX + opts.yOffset) + "px" 
      }); 
     }); 

    } 

    // options defaults 
    $.fn.tooltipImg.defaults = { 
    xOffset : 10, 
    yOffset : 30, 
    wrapper : 'myTooltipImgWindow' 
    } 

})(jQuery);

用法

$(document).ready(function(){ 
    $('.tooltipMe').tooltipImg(); 

    // with options 
    $('.tooltipMe').tooltipImg({ 
    xOffset : 20, 
    yOffset : 40, 
    wrapper : 'myToolTipContainerClass' 
    }); 
});

你可以看到這個working Fiddle!

這小提琴說明從跨域圖像，使用相對路徑，並從imgsrc。

注意，小提琴下相對路徑是越野車，有時你看到它，你沒有其他時間，但它的作品就好了！

來源

2012-05-16 02:52:40 Zuul

謝謝。但是，如果你可以修改它，所以任何機會，所以我可以做這樣的事情：'$（「。myClass」）。tooltip（「」）;'或'$（「.myClass」）。tooltip（「

some text ..

」）;'？ –

是的，我可以。我有我的習慣，我會更新我的答案！ – Zuul

根據建議的插件使用jQuery擴展更新了答案。底部有一個小提琴和一個實例！ – Zuul

我以前見過這種情況 - 這就是爲什麼我搜索了一個更靈活，易於使用且易於集成的工具提示。我通過Listly發現了一個很棒的工具 - 查看WalkMe.com。我想你會發現結果非常令人愉快。讓我知道這些圖像是如何工作的。

來源

2012-05-16 11:31:26 Rachel

在編寫我自己的簡單工具提示時，我發現當我將我的工具提示附加到非正文元素時。在IE7，IE8和IE9中隱藏/顯示工具提示之間出現了跳動或不安。

例如，我有$('li').append(toolTip html..)這會導致工具提示的不安或隱藏隱藏/顯示。在Firefox，Chrome和Safari中不會感到不安或緊張。在IE7，IE8和IE9中不好。

當我切換到$('body').append(toolTip html..)時，IE7，IE8和IE9的顯示效果如預期，並且在Firefox，Chrome和Safari中仍能正常工作。

來源

2012-09-14 14:04:58 user1098909

我在jQuery論壇上找到了一個解決方案。只需刪除這樣的顯示和隱藏效果：

jQuery('#myelement').tooltip({ 
    show: false, 
    hide: false 
});

來源

2013-04-24 23:40:07

jquery工具提示是非常跳動

回答

EDITED

相關問題