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