jQuery工具提示不工作的多個實例

我總共有4個圖形按鈕，我需要編程工具提示。他們只會在時間這是他們應該如何工作的工作1，我需要能夠樣式的所有4分別基於大小/顏色/位置等jQuery工具提示不工作的多個實例

var id = "#tt"; 
var $elem = $(id); 

$elem.on("mouseenter", function(e) { 
    e.stopImmediatePropagation(); 
}); 

$elem.tooltip({ 
    items: id, 
    content: "<div class='tooltip'><span class='title'>EMPEROR'S ELITE WASH - $18</span><br /><br /><em>Includes:</em><br />&bull; Simoniz Hot Wax and Shine</div>" 
}); 

$elem.on("click", function(e) { 

    $elem.tooltip("open"); 
}); 


$elem.on("mouseleave", function(e) { 
    e.stopImmediatePropagation(); 
}); 


$(document).mouseup(function(e) { 
    var container = $(".ui-tooltip"); 
    if (!container.is(e.target) && 
    container.has(e.target).length === 0) { 
    $elem.tooltip("close"); 
    } 
});

這裏是我開始工作提琴：http://jsfiddle.net/c6wa4un8/261/

它可以作爲一個單一的ID，但現在我無法處理多個元素。也許有比再次複製所有相同的代碼更容易的方法（上面的代碼），但我只需要爲每個ID添加單獨的內容的能力。

經過var container = $(".ui-tooltip")我試着加入.addClass("king");，但沒有任何運氣造型的個人股利。

任何幫助表示讚賞，謝謝。

來源

2016-12-13 breinhart

給這個複雜的內容，你可能還不如干脆躲在相關項目，已風格出現在正確的地方，只需在mouseenter上顯示它們等。試圖使用jQuery工具提示，僅僅因爲它存在，並不總是最簡單的解決方案。 –

謝謝你的回覆。我會考慮用一些.hide/.show參數設置4個div，並使用不同的動作。我最近爲另一個項目做了一些onclick標籤，所以也許我可以從中調整一些東西。 – breinhart

因爲我有4個元素，所以我最終選擇了這個。

$('.king').on('click', function() { 
$parent_box = $(this).closest('.box'); 
$parent_box.siblings().find('.bottom-king').hide(); 
$parent_box.find('.bottom-king') .toggle(); 
});

，並在彈出的我編寫了一個鏈接，關閉對話框

$('.close').on("click", function() { 
$(this).parents('.bottom-king').fadeOut(); 
});

來源

2017-01-05 22:47:03 breinhart

jQuery工具提示不工作的多個實例

回答

相關問題