如何用自定义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