jQuery UI 工具提示应该显示 Div 而不是标题属性
jQuery UI Tooltip should show Div instead of title attribute
如何使用 jQuery UI 工具提示动态显示 Div 基于给定属性(title 属性除外)的容器?
Fiddle 示例将显示我的问题:
我有不同的链接,它们也可以有一个标题属性,如果有一个给定的属性,工具提示应该读取值并显示贡献 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>
目前只显示标题属性,这是标准行为。但我想以这种方式更改调用,以便我可以在工具提示中看到 Divs(Divs 仅包含此示例中的文本,但实际上可能要复杂得多)。
您可以为此目的使用 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();
}
});
希望对您有所帮助。
如何使用 jQuery UI 工具提示动态显示 Div 基于给定属性(title 属性除外)的容器?
Fiddle 示例将显示我的问题:
我有不同的链接,它们也可以有一个标题属性,如果有一个给定的属性,工具提示应该读取值并显示贡献 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>
目前只显示标题属性,这是标准行为。但我想以这种方式更改调用,以便我可以在工具提示中看到 Divs(Divs 仅包含此示例中的文本,但实际上可能要复杂得多)。
您可以为此目的使用 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();
}
});
希望对您有所帮助。