jQuery UI提示应该显示Div而不是title属性

Question

如何使用jQuery UI工具提示根据给定属性动态显示Div容器，而不是title属性？

以下Fiddle示例展示了我的问题：

示例Fiddle

我有不同的链接，它们可以有一个title属性，如果有一个给定的属性，工具提示应该读取该值并显示相应的Div。

示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="toolTipHTML" data-ttcontent="help1_content" title="test 1">Help 1</span>
<span class="toolTipHTML" data-ttcontent="help2_content" title="test 2">Help 2</span>

<div class="help1_content">
  Text for Help 1 goes here!
  <br>Lorem
  <br>Ipsum
</div>

<div class="help2_content">
  Text for Help 1 goes here!
  <br>Lorem
  <br>Ipsum
</div>

目前它只显示标题属性，这是标准行为。但我想改变调用方式，以便可以在工具提示中看到Div（在此示例中，Div仅包含文本，但在实际情况下可能更加复杂）。

- JonSnow

---

请检查 https://jqueryui.com/tooltip/#custom-content 中与编程有关的内容。 - Hudhaifa Yoosuf

谢谢，我看到了这个，但是根据给定的信息无法构建出一个可行的解决方案 :-/ - JonSnow

Answer 1

已更新的代码.

你可以使用 content 选项来实现此目的:

$('.toolTipHTML').tooltip({
  show: { duration: 0 },
  hide: { effect: "fade", duration: 100 },
  position: { my: "left top", at: "left bottom" },
  content: function() {
    return $('.'+$( this ).attr('data_ttcontent')+'_content').html();
  }
});

希望这有所帮助。

- Zakaria Acharki