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")         
  })     
})

演示小提琴 - ＆gt;的 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')
  })

Answer 3

您可以将工具提示应用于<tr>，并将弹出窗口应用于所有子<td>。在javascript中定义属性并将属性附加到相关类（在此示例中为class="my-popover"），这样您就不必多次写出弹出窗口。

例如：

查看：

 <table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr data-toggle="tooltip" title="This tooltip is on top!">
      <td class="my-popover">1</td>
      <td class="my-popover">Mark</td>
      <td class="my-popover">Otto</td>
      <td class="my-popover">@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

使用Javascript：

$( document ).ready(function() {
    $(".my-popover").attr({"data-toggle":"popover", "data-container":"body", "data-placement":"bottom", "data-content":"My popover content", "data-original-title":"Popover title"});
    $("[data-toggle=tooltip]").tooltip();
    $("[data-toggle=popover]").popover();
});

<强> Bootply here

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

3 个答案: