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

时间:2016-12-08 10:38:39

标签: jquery jquery-ui jquery-ui-tooltip

如何使用jQuery UI工具提示根据除title属性之外的给定属性动态显示Div容器?

小提琴示例将显示我的问题:

Example Fiddle

我有不同的链接,也可以有一个title属性,如果有一个给定的属性,Tooltip应该读取该值并显示贡献的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>
&#13;
&#13;
&#13;

目前它只显示标题属性,这是标准行为。但我希望以这种方式改变调用,我可以在工具提示中看到Divs(Divs在此示例中仅包含Text,但实际上可能更复杂)。

1 个答案:

答案 0 :(得分:2)

<强> Updated fiddle

您可以使用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();
  }
});

希望得到这个帮助。