如何用自定義div來包裝jqueryUI工具提示？

Question

因此默認情況下，工具提示是使用包含.ui-tooltip的父div創建的。有沒有什麼辦法可以做到這一點，將.ui-tooltip換成自定義格子，，而無需使用其他庫？

$(tooltipTrigger).tooltip({ 
    tooltipClass: "custom-tooltip-styling", // this works 
    tooltipWrapper: "<div class='custom-tooltip-wrapper'></div>" // this is what I want to work 
}); 

我基本上要輸出看起來像這樣：

<div class="custom-tooltip-wrapper"> 
    <div class="ui-tooltip custom-tooltip-styling"></div> 
</div> 

我試圖內.tooltip()使用.wrap()，但似乎並沒有工作。有任何想法嗎？

Answer 1

您可以使用open - 事件環繞創建的工具提示您格：

$(document).tooltip({ 
    tooltipClass: "custom-tooltip-styling", 
    open: function(event, ui) { 
     $(ui.tooltip).wrap("<div class='custom-tooltip-wrapper'></div>"); 
    }, 
    close: function(event, ui) { 
     $('.custom-tooltip-wrapper').remove(); 
    } 
}); 

但是，你需要風格你的包裝因此，否則只會出現在頁面的末端。 我使用close - 事件在這裏擺脫包裝後。

---

Example