<button title="Tooltip on right" data-placement="right" data-toggle="tooltip" class="btn btn-default mrs" type="button">Tooltip on right</button>
<script>
$(function () {
$('[data-toggle=tooltip]').tooltip();
});
</script>
This works fine but I'd like to include an image and some text inside the tooltip. I tried to use data-content="some stuff" but it shows nothing.
You have to pass in the html option to when you initialize .tooltip.
e.g.
<div class="cart">
<a data-toggle="tooltip" title="<img src='http://getbootstrap.com/apple-touch-icon.png' />">
<i class="icon-shopping-cart"></i>
</a>
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
html: true
});
See the example fiddle
Related
Im attempting to do a pop over with bootstrap and keep the existing div formatting.
How can i fix the code below to make it work.
<ul class="list-group" data-bind="foreach: courses">
<li class="list-group-item CourseHover" data-bind="css: { hidden : isSatisfied}" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">
<a tabindex="0" class="" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">
<div class="row">
<div class="col-sm-10">
<span data-bind="text:courseName"></span>
</div>
<div class="col-sm-2">
<span data-bind="text:courseCredits"></span> cr
</div>
</div>
</a>
</li>
Popovers have to be initialized by jquery.
This code should do the trick:
$(function() {
$('[data-toggle="popover"]').popover()
})
You also might want to put data-placement="bottom" or data-placement="top" in your anchor tag -- the popover otherwise might appear way to the right.
Bootstrap's popover is easily used on tags like in this demo Is there any way to use it with hover event and on a div tag?
HTML:
<div class="container">
<a id="popoverData" class="btn" href="#" data-content="Popover with data-trigger" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover">Popover with data-trigger</a>
<a id="popoverOption" class="btn" href="#" data-content="Popup with option trigger" rel="popover" data-placement="bottom" data-original-title="Title">Popup with option trigger</a>
</div>
JS:
$('#mytext').popover();
$('#name').popover();
Sure why not?
See this jsFiddle: http://jsfiddle.net/9P64a/2892/
html
<div id="container" data-content="Popup with option trigger" rel="popover" data-placement="bottom" data-original-title="Title">
Whatever you want.
</div>
javascript
$('#container').popover({ trigger: "hover" });
There is a simple example of popover here. How can I add a condition to this example? For example the popover should be triggered when it is hovered AND var "triggerPopover" is true.
HTML on jsfiddle:
<div class="container">
<a id="popoverData" class="btn" href="#" data-content="Popover with data-trigger" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover">Popover with data-trigger</a>
<a id="popoverOption" class="btn" href="#" data-content="Popup with option trigger" rel="popover" data-placement="bottom" data-original-title="Title">Popup with option trigger</a>
</div>
Javascript:
$('#popoverData').popover();
$('#popoverOption').popover({ trigger: "hover" });
So here is a issue I am experiencing that is driving me nuts. As soon as I enable Bootstrap tooltips on my tags, the custom JavaScript I have won't trigger. If I remove the Bootstrap code that triggers the tooltip from the tag, everything works. JSFiddle Example
Working Example (remove: data-toggle="tooltip" data-placement="left" title="Parent Title Text." and it will work):
<li>
<a class="toggle-data-options" data-toggle="tooltip" data-placement="left" title="Parent Title Text.">Parent
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="display: inline;"></span>
<span class="glyphicon glyphicon-chevron-down" style="display:none;"></span>
</a>
<div class="data-options" style="display: none">
<a class="less-data-options" data-toggle="tooltip" data-placement="left" title="Child Item 1 Text">Child Item 1</a>
<a class="less-data-options" data-toggle="tooltip" data-placement="left" title="Child Item 2 Text">Child Item 2</a>
<a class="less-data-options" data-toggle="tooltip" data-placement="left" title="Child Item 3 Text">Child Item 3</a>
</div>
</li>
When you enable the bootstrap tooltip it inserts the tooltip <div> immediately after .toggle-data-options.
.data-options is no longer the .next() element, so there is no match. Use .nextAll() instead:
$(document).ready(function () {
$('.toggle-data-options').on('click', function () {
$(this).nextAll('.data-options').toggle('fast');
$(this).toggleClass("active");
$(this).find('span').slideToggle(0);
});
});
JSFiddle
I have the following function:
$('[data-toggle=popover]').hover(
function () {
$(this).popover('show');
}, function () {
$(this).popover('hide');
}
);
It works on this link (displays popover):
<p class="pull-right" style="margin-top: .5em;">
<i class="fa fa-question-circle fa-2x" data-toggle="popover" data-placement="left" title="Export Sets Help" data-content="foo"> </i>
</p>
but not this one (nothing fires):
<span class="green" data-toggle="popover" data-placement="left" title=""
data-content="foo" data-original-title="Status Detail">
<i class="fa fa-check"> </i>Success
</span>
The later link was created via a datatable row so the function actions were not attached. Adding the function to fnDrawCallback worked.