jQuery UI多選工具提示正在崩潰

我試圖創建一個可選 jQuery UI工具提示。工具提示與頁面上的鏈接相關聯。

當鏈接被文本包圍時，它可以正常工作。但是當相鄰的鏈接很少時，功能就會重疊並且工具提示不再流暢地顯示。

下面的JavaScript代碼

$("[title][data-scan]").bind("mouseleave", function (event) { 
event.stopImmediatePropagation(); 
var fixed = setTimeout('$("[title][data-scan]").tooltip("close")', 100); 
$(".ui-tooltip").click(function() { 
    alert("I am clickable"); 
    return false; 
}); 
$(".ui-tooltip").hover(
function() { 
    clearTimeout(fixed); 
}, 
function() { 
    $("[title][data-scan]").tooltip("close"); 
});}).tooltip({ 
items: "img, [data-scan], [title]", 
content: function() { 
    var element = $(this); 
    if (element.is("[data-scan]")) { 
     var text = element.attr("href"); 
     return "<a href='http://www.google.com'>You are trying to open a tooltip <span>" + text + "</span></a>"; 
    } 
    if (element.is("[title]")) { 
     return element.attr("title"); 
    } 
    if (element.is("img")) { 
     return element.attr("alt"); 
    } 
}, 
position: { 
    my: "right center", 
    at: "left center", 
    delay: 200, 
    using: function (position, feedback) { 
     $(this).css(position); 
     $("<div>") 
     .addClass(feedback.vertical) 
      .addClass(feedback.horizontal) 
      .appendTo(this); 
    } 
}});

來源

2013-02-28 Eric

我試圖解決這個問題是通過將代碼中的變量fixed全球（使它通過其他的jQuery UI訪問屬性），並在Open事件，隱藏任何其他以前打開的工具提示並清除保存在fixed變量中的超時ID。

你可以找到這裏的解決方案http://jsfiddle.net/zumot/dVGWB/ ，雖然看到代碼工作正常，你將不得不直接在瀏覽器上運行。

這是固定代碼的快速縮短。

// Make the timeout id variable global 
    var fixed = 0; 

$("[title][data-scan]").tooltip({ 
    items: "img, [data-scan], [title]", 
    content: function() { 
     var element = $(this); 
     if (element.is("[data-scan]")) { 
      var text = element.attr("href"); 
      return "<a href='http://www.google.com'>You are trying to open a tooltip <span>" + text + "</span></a>"; 
     } 
     if (element.is("[title]")) { 
      return element.attr("title"); 
     } 
     if (element.is("img")) { 
      return element.attr("alt"); 
     } 
    }, 
    open: function (event, ui) { 
     // When opening a new div, hide any previously opened tooltips first. 
     $(".ui-tooltip:not([id=" + ui.tooltip[0].id + "])").hide(); 
     // clear timeout as well if there's any. 
     if (tf > 0) { 
      clearTimeout(tf) 
     }; 
    }, 
    position: { 
     my: "right center", 
     at: "left center", 
     delay: 200, 
     using: function (position, feedback) { 
      $(this).css(position); 
      $("<div>") 
       .addClass(feedback.vertical) 
       .addClass(feedback.horizontal) 
       .appendTo(this); 
     } 
    } 
}).bind("mouseleave", function (event) { 
    // stop defeulat behaviour 
    event.stopImmediatePropagation(); 
    fixed = setTimeout('$("[title][data-scan]").tooltip("close")', 100); 
    $(".ui-tooltip").hover(

    function() { 
     clearTimeout(tf); 
    }, function() { 
     $("[title][data-scan]").tooltip("close"); 
    }) 
});

來源

2013-03-19 11:32:08 Eric

jQuery UI多選工具提示正在崩潰

回答

相關問題