如何使用自定义 div 包装 jqueryUI 工具提示？

Question

因此，默认情况下，工具提示是使用包含 .ui-tooltip 的父级 div 创建的。有什么办法可以做这样的事情来将 .ui-tooltip 包装在自定义 div、 中而不使用另一个库 ?

$(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 - 事件将您的 div 包裹在创建的工具提示周围：

$(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

如何使用自定义 div 包装 jqueryUI 工具提示？

How to wrap jqueryUI tooltip with custom div?

jquery

jquery-ui

tooltip

jquery-ui-tooltip