如何在Bootstrap工具提示中添加标签表

Question

如何在Bootstrap工具提示中添加标签表

3

我按照以下方式初始化对象

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

但我只看到了 text1。是否可以在工具提示中插入表格？

- gregor

3个回答

1

使用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>

- Malik Zahid

1

我认为工具提示的内容被添加到应用工具提示的元素的title属性中。简而言之，你试图做的是...

<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>

- Lex

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tommy · Accepted Answer

我在Github上发现了一个问题报告，指出Bootstrap的清洁器导致了这个问题。

你需要做的是允许所有用于表格的元素在白名单中（还有tbody，虽然它没有在你的代码中定义，但看起来你需要它）。同时参考一下这个问题, 在那里它是针对弹出框完成的。之后，你可以再次在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的弹出框来显示更大的内容，例如表格。

祝你好运！