如何在Bootstrap Tooltip中添加标签表

Question

我按如下方式初始化对象

$('[data-toggle="tooltip"]').tooltip({
    container: 'body',
    html: true,
    title: function () {
        return '<u>text1</u><table class="table"><tr><td>text2</td></tr></table>';
    }
});

但我只看到

text1

。 是否可以在工具提示中插入表格？

Answer 1

我在 Github 上发现了一个 问题，指出 Bootstrap 的消毒剂导致了这个问题。

您需要做的是允许用于您的表的所有元素都在白名单中（也

tbody

，这不是由您的代码定义的，但似乎您需要它）。另请看一下这个question，它是为弹出窗口完成的。之后，您可以再次在

tooltip

选项中使用此自定义白名单。

我创建了一个运行的小提琴：

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList;
myDefaultWhiteList.table = ['class'];
myDefaultWhiteList.tbody = [];
myDefaultWhiteList.tr = [];
myDefaultWhiteList.td = [];

$('[data-toggle="tooltip"]').tooltip({
  container: 'body',
  html: true,
  whiteList: myDefaultWhiteList,
  title: function () { return '<u>text1</u><table class="table text-light"><tr><td>text2</td></tr></table>'; }
});

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<button class="ml-5 mt-5 btn btn-primary" data-toggle="tooltip">
  Test
</button>

您可能会注意到，这是 Bootstrap 不建议的行为。我建议使用 Bootstrap 的弹出框来处理较大的内容，例如表格。

祝你好运！

Answer 2

我相信工具提示的内容已添加到您要应用工具提示的元素的标题属性中。要分解它，本质上你想做的是......

<div data-toggle="tooltip" title="<u>text1</u><table class="table"><tr><td>text2</td></tr></table>">
Foo
</div>

$('[data-toggle="tooltip"]').tooltip();

如果您想在表格中包含信息作为工具提示，我认为您必须创建一个包含表格的元素，将其正确放置在您想要悬停的元素附近，并使用 $.hover 来显示和隐藏元素。类似的东西

$('#hoverTest').hover(function(){
  $('#customTooltip').removeClass('hideme');
}, function(){
  $('#customTooltip').addClass('hideme');
});

table, th, td {
  border: 1px solid black;
}

.hideme{
  display:none
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hoverTest">Hover here</div>
<div id="customTooltip" class="hideme">
  <table>
    <th>Col1</th>
    <th>Col2</th>
    <tr>
      <td>Cell1</td>
      <td>Cell2</td>
    </tr>
   </table>
 </div>

Answer 3

jquery 最简单的技巧。 http://jsfiddle.net/b80tn4hx/3/

$('a').hover(function(ev){
    $('.tablediv').stop(true,true).fadeIn(); 
},function(ev){
    $('.tablediv').stop(true,true).fadeOut();
}).mousemove(function(ev){
    $('.tablediv').css({left:ev.layerX+10,top:ev.layerY+10});
});

.container{
  padding: 15px;
}
.tablediv{
   display:none;
    position:absolute;
    background: #999;
    padding: 5px;
    border: 1px solid red;
}
td{
   border:1px solid #777;   
    padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <a href="#">test</a>
  <div class="tablediv">
    <table>
        <tr><td>asdf</td><td>gsdi</td></tr>
        <tr><td>asdf</td><td>gsdi</td></tr>
    </table>
  </div>
</div>

Answer 4

看起来 whiteList 现在是一个 allowList 并且不再那么“隐藏”。

工具提示标题中有使用 table、tbody、td 等所需的 javascript 代码示例。

https://getbootstrap.com/docs/5.2/getting-started/javascript/#sanitizer

我希望这有帮助。