Bootstrap 3 popover and tooltip on the same element

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

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 2

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