在同一元素上的Bootstrap 3 Popover和工具提示 [英] Bootstrap 3 popover and tooltip on the same element

问题描述

是否可以在同一元素上使用工具提示和Bootstrap 3的弹出窗口?

it is possible to use a tooltip and popover of Bootstrap 3 on the same element?

我有一张桌子，想在每行(tr)上显示一个工具提示.另外，当用户单击该行时，我想显示一个弹出窗口.这两个组件都需要data-toggle属性，所以我怀疑是否可以这样做.

I have a table and want to show on each row (tr) a tooltip. Additionally I want to show a popover when a user clicks on the row. Both components need the data-toggle attribute so I doubt it is possible to do so.

有人知道这是否可行吗?

Does anybody knows if it is possible or if there is a workaround?

推荐答案

您没有必须使用data-toggle，title等.手动调用引导插件.参见以下示例:

You dont have to use data-toggle, title and so on. Invoke the bootstrap plugins manually. See this example :

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

demo fiddle -> http://jsfiddle.net/79fXt/

这篇关于在同一元素上的Bootstrap 3 Popover和工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！