Bootstrap 3彈出窗口和工具提示在同一元素上

Question

有可能在同一元素上使用Bootstrap 3的工具提示和彈出窗口？

我有一張桌子，想在每一行（tr）上顯示一個工具提示。另外，我想在用戶點擊該行時顯示彈出窗口。這兩個組件都需要數據切換屬性，所以我懷疑是否有可能這樣做。

有誰知道是否有可能或者是否有解決方法？

Answer 1

你不有到使用data-toggle,title等。手動調用引導插件。看到這個例子：

<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

您可以將工具提示應用於<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

Answer 3

我需要兩個工具提示和酥料餅在相同的元素。工具提示用於用戶懸停時的信息，彈出窗口用於點擊時顯示確認框。

在這種情況下，當popover出現時，我需要tooltip消失。我添加的代碼一點點像這樣@ 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') 
    })