Popust Bootstrap 3 i podpowiedź na tym samym elemencie

Question

jest możliwe użycie podpowiedzi i popover z Bootstrap 3 na tym samym elemencie?

Mam tabelę i chcę pokazać w każdym wierszu (tr) etykietkę narzędzia. Dodatkowo chcę pokazać popover, gdy użytkownik kliknie wiersz. Oba komponenty wymagają atrybutu przełączania danych, więc wątpię, aby było to możliwe.

Czy ktoś wie, czy jest to możliwe, lub czy istnieje obejście problemu?

Answer 1

You dont mieć do użyj data-toggle, title i tak dalej. Wywołaj wtyczki bootstrap ręcznie. Zobacz poniższy przykład:

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

skryptu:

$('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 skrzypce ->http://jsfiddle.net/79fXt/

Answer 2

Możesz zastosować etykietę narzędzia do <tr> i popover do wszystkich dzieci <td>. Zdefiniuj atrybuty w javascript i dołącz atrybuty do odpowiedniej klasy (w tym przykładzie class="my-popover"), aby nie trzeba było wielokrotnie pisać popover.

Na przykład:

Widok:

<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

co potrzebne zarówno podpowiedź i popover na tym samym elemencie. Etykieta narzędzia służy do uzyskiwania informacji, gdy użytkownik się unosi, a okienko popover służy do klikania w polu potwierdzenia.

W tym przypadku potrzebuję, aby podpowiedź zniknęła po wyświetleniu okna Popover. Dodałem trochę kodu @ davidkonrad na rozwiązanie jak to:

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