Bootstrap 3 popover and tooltip on the same elemen

Question

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

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?

Answer 1

I needed both tooltip and popover on the same element. The tooltip is for information when the user hovers, and the popover is for a confirmation box when they click.

In this case, I need the tooltip to go away when the popover appears. I added a little bit of code to @davidkonrad's solution like this:

  $(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 2

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> 

script :

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

Answer 3

You can apply the tooltip to the <tr> and the popover to all of the child <td>'s. Define the attributes in javascript and append the attributes to the relevant class (in this example class="my-popover") so that you don't have to write out the popover multiple times.

For example:

View:

 <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