Question

我有一段代码可以使用bootstrap生成一个tootip。

var msg ="Oops! This is a test message";
$('#addItInfo').attr('data-original-title',msg);
$('#addItInfo').tooltip('show');
setTimeout( function(){ 
   $('#addItInfo').tooltip('hide');
   $('#addItInfo').removeAttr('title');
   $('#addItInfo').removeAttr('data-original-title'); 
}  , 2500 ); //Wait 2,5 seconds

这段代码运行良好，但想象一下，我想要显示一个包含一些数据的表，而不是简单的消息。我尝试在<table>内创建一个var msg元素，如下所示：

var msg ="<table><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$50</td></tr></table>";

我希望在tootip中看到一个表，但我得到的是字符串<table><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$50</td></tr></table>。

在这里example我使用相同的想法但没有引导程序。它可以解决一些未成年人问题，我可以在以后解决。

现在我的问题是如何允许bootstrap在工具提示中显示任何HTML元素？我看了documentation，但我没有发现任何相关内容。

Answer 1

您在触发元素上缺少data-html="true"。记录在案。

Html选项 - 默认为false。将HTML插入工具提示。如果为false，则jQuery的文本方法将用于将内容插入到 DOM。如果您担心XSS攻击，请使用文本。

工作fiddle

如何在Tooltip Bootstrap中插入HTML元素？

1 个答案: