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