In bootstrap, the tooltip component is useful to show the HTML elements title attributes text on hover with a customized small pop up style. The tooltips rely on CSS3 animations and data-attributes for the title to display as tooltip.
In order to create the tooltips, the following attributes are required:
data-toggle="tooltip" attribute to toggle the tooltip feature for the selected element.title attribute for the text you want to get displayed in the tooltip.data-placement attribute it’s optional but required to set the direction of the tooltip on top, bottom, left or right side of the element.Following is the example of creating the tooltip for required elements in bootstrap.
<a href="#" class="btn btn-primary" data-toggle="tooltip" title="Sample tooltip">Hover me</a>
<button type="button" class="btn btn-primary" data-toggle="tooltip" title="Click me to save">Submit</button>
In bootstrap, the custom style tooltips can be triggered with jQuery. So, you need to import the following script in order to initialize the tooltips.
The above script will initialize all the tooltips on a page with data-toggle attribute. In case, if you want to enable the tooltip for particular element, then call the tooltip() method with the id or class of the particular element.
The above example will return the result like as shown below.
The bootstrap tooltips can be enabled for any element such as labels, images, input controls, etc. by adding the required attributes based on our requirements.
By default, the bootstrap tooltips will appear on the top of element. However, you can change the direction of tooltip to top, left, right and bottom by using data-placement attribute.
<!-- Tooltip Positions -->
<a href="#" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Top tooltip">Top Tooltip</a>
<a href="#" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Left tooltip">Left Tooltip</a>
<a href="#" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Right tooltip">Right Tooltip</a>
<a href="#" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Bottom tooltip">Bottom Tooltip</a>
The above example will return the result like as shown below.
In bootstrap, you can pass the different options to tooltip() method to customize the tooltip based on your requirements.
Following are the few of important options which we can pass to tooltip() method in bootstrap.
| Name | Type | Default | Description |
|---|---|---|---|
| animation | boolean | true | It is useful to set fade transition to the tooltip. |
| container | string | false | false | It is useful to append the tooltip to a specific element. |
| delay | number | 0 | It is useful to delay showing and hiding the tooltip (ms). |
| html | boolean | false | It is useful to allow HTML in the tooltip. |
| placement | string | 'top' | It is useful to specify the position of tooltip. |
| title | string | '' | It is useful to set the tooltip text. |
| trigger | string | 'hover focus' | It is useful to set how tooltip to trigger - click | hover | focus | manual. You can pass multiple triggers by separating them with space. |
| offset | number | string | 0 | It is useful to set offset of the tooltip relative to its target. |
The above tooltip options can set either through the data attributes or JavaScript. Following is the example of passing the options through JavaScript to tooltip() method.
<script>
$(function() {
$('#toptltp').tooltip({
title: 'Sample Tooltip'
});
$('#lftltp').tooltip({
title: 'Left Tooltip',
placement: 'left'
});
$('#rttltp').tooltip({
title: '<b>Right</b> Tooltip',
html: true,
placement: 'top'
});
$('#bttltp').tooltip({
title: 'Bottom Tooltip',
placement: 'bottom',
delay: {
show: 0,
hide: 300
}
});
});
</script>
If you observe the above code, we are passing multiple options to tooltip() method by using JavaScript. The above example will return the result like as shown below.
Same like above tooltip options, we have different tooltip() methods to show, hide, or toogle the tooltips based on our requirements.
| Method | Description |
|---|---|
| .tooltip(options) | It is useful to attach tooltip options. |
| .tooltip('show') | It is useful to show the tooltip |
| .tooltip('hide') | It is useful to hide the tooltip |
| .tooltip('toggle') | It is useful to toggle the tooltip |
| .tooltip('dispose') | It is useful to hide and destroy the tooltip |
| .tooltip('enable') | It gives an element’s tooltip the ability to be shown. |
| .tooltip('disable') | It remove the ability for an element’s tooltip to be shown. |
Following is the example of using tooltip() methods to show, hide, or toggle the tooltip based on the button clicks in bootstrap.
<script>
$(function() {
$('#btnShow').click(function() {
$('#smptltip').tooltip('show');
});
$('#btnHide').click(function() {
$('#smptltip').tooltip('hide');
});
$('#btnTgle').click(function() {
$('#smptltip').tooltip('toggle');
});
});
</script>
The above example will return the result like as shown below.
In bootstrap, the tooltip classes are having few events for hooking into tooltip functionality to fire the events during showing or hiding the tooltip.
| Event | Description |
|---|---|
| show.bs.tooltip | This event will trigger before the tooltip is shown. |
| shown.bs.tooltip | This event will trigger after the tooltip is shown. |
| hide.bs.tooltip | This event will trigger before the tooltip is hidden. |
| hidden.bs.tooltip | This event will trigger after the tooltip is hidden |
| inserted.bs.tooltip | This event will trigger after the show.bs.tooltip event, before the tooltip is shown. |
Following is the example of using the events to show the alert message during showing and hiding the tooltip in bootstrap.
<script>
$(function() {
$('[data-toggle="tooltip"]').tooltip();
$("#tltip1").on('hidden.bs.tooltip', function() {
alert('The tooltip1 is dismissed');
});
$("#tltip2").on('show.bs.tooltip', function() {
alert('The tooltip2 will be shown now');
});
});
</script>
This is how we can use the bootstrap tooltips in our applications to show the HTML elements title attributes text on hover with a customized pop up style based on our requirements.