Bootstrap 3 Popover und Tooltip auf dem gleichen Element

Question

ist es möglich, eine Tooltip und Popover von Bootstrap 3 auf dem gleichen Element zu verwenden?

Ich habe eine Tabelle und möchte in jeder Zeile (tr) einen Tooltip zeigen. Außerdem möchte ich ein Popover zeigen, wenn ein Benutzer auf die Zeile klickt. Beide Komponenten benötigen das Data-Toggle-Attribut, so dass ich bezweifle, dass dies möglich ist.

Weiß jemand, ob es möglich ist oder ob es einen Workaround gibt?

Answer 1

Sie nicht haben zu Verwenden Sie data-toggle, title und so weiter. Rufen Sie die Bootstrap-Plugins manuell auf. Sehen Sie folgendes Beispiel:

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

Skript:

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

Demo Geige ->http://jsfiddle.net/79fXt/

Answer 2

Sie können den Tooltip auf <tr> und das Popover auf alle untergeordneten <td>'s anwenden. Definieren Sie die Attribute in Javascript und hängen Sie die Attribute an die entsprechende Klasse an (in diesem Beispiel class="my-popover"), damit Sie das Popover nicht mehrfach ausschreiben müssen.

Zum Beispiel:

Ausblick:

<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

ich beide Tooltip benötigt und popover auf demselben Element. Der Tooltip dient der Information, wenn der Benutzer den Mauszeiger berührt, und das Popover dient als Bestätigungsfeld, wenn er darauf klickt.

In diesem Fall muss der Tooltip verschwinden, wenn das Popover angezeigt wird. Ich habe ein wenig Code @ davidkonrad-Lösung wie folgt aus:

$(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') 
    })