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>

我尝试在.wrap()中使用.tooltip()，但这似乎不起作用。有什么想法吗？

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工具提示？

1 个答案: