Bootstrap 3 popover和工具提示在同一个元素上

Question

可以在同一个元素上使用Bootstrap 3的工具提示和弹出窗口吗？

我有一张桌子,想在每一行(tr)上显示一个工具提示.此外,我想在用户点击该行时显示一个弹出窗口.两个组件都需要数据切换属性,因此我怀疑是否可以这样做.

有人知道是否可行或是否有解决方法？

Answer 1

你不必使用data-toggle,title等等.手动调用bootstrap插件.看这个例子:

<table>
  <tr tooltip-title="Tooltip title #1" 
      popover-title="popover title #1" 
      popover-content="popover content #1">
    <td>qwerty</td><td>qwerty</td><td>qwerty</td><td>qwerty</td>  
  </tr>
  <tr tooltip-title="Tooltip title #2" 
      popover-title="popover title #2" 
      popover-content="popover content #2">
    <td>qwerty</td><td>qwerty</td><td>qwerty</td><td>qwerty</td>               
  </tr>
</table> 

脚本:

$('tr').each(function() {
  $(this).popover({    
    content : $(this).attr("popover-content"),
    title : $(this).attr("popover-title")         
  })     
  $(this).tooltip({    
    placement : 'bottom',  
    title : $(this).attr("tooltip-title")         
  })     
})

演示小提琴 - > http://jsfiddle.net/79fXt/

Answer 2

我在同一个元素上需要工具提示和弹出框.工具提示用于用户悬停时的信息,弹出窗口用于单击时的确认框.

在这种情况下,我需要工具提示在弹出窗口时消失.我在@ davidkonrad的解决方案中添加了一些代码,如下所示:

  $(this).popover({    
    content : $(this).attr("popover-content"),
    title : $(this).attr("popover-title")         
  }).tooltip({    
    placement : 'bottom',  
    title : $(this).attr("tooltip-title")         
  }).on('show.bs.popover', function() {
    $(this).tooltip('hide')
  })