Bootstrap provides dozens of custom plugins that help to create better UI. With this, you can easily add modal, tabs, and tooltip to the HTML elements.
A tooltip will appear when the user moves the mouse pointer over the element e.g. link, buttons, etc. This gives hints or quick information to the user.
It is helpful for the new visitor to the website to understand the advanced UI and functionality.
Contents
1. Download
<!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- Bootstrap --> <link href='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css' rel='stylesheet' type='text/css'> <script src='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js' type='text/javascript'></script>
2. Initialize
- Create the elements and specify
data-toggle='tooltip'. - Add
titleattribute on which specify your tooltip text. - Call
tooltip()method on[data-toggle='tooltip']selector.
Example
<div class='container' style='margin-top: 100px;'>
<a href="#" data-toggle="tooltip" title="Tooltip text">Hover me</a>
</div>
<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
// Initialize
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Other selectors
It is not mandatory that to add tooltip you have to always define data-toggle='tooltip' on the elements. You can either use any other selectors.
Example
<div class='container' style='margin-top: 100px;'>
<a href="#" class='tooltipEl' title="Tooltip text">Hover me</a>
</div>
<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
// Initialize
$('.tooltipEl').tooltip();
});
</script>
Both of the above examples will generate the same output.
3. Set position
By default the tooltip text show at the Top of the element. You can change its position with the data-placement attribute.
Which takes – top, bottom, left, and right value.
Example
Created <div> container with different-different tooltip positions. In the script, I used title option to add tooltip text if title attribute not defined in the element.
<style>
.tooltipEl{
float: left;
margin-right: 10px;
margin-top: 50px;
}
</style>
<div class='container'>
<div >
<div class="tooltipEl" data-placement="top" title="Tooltip in the top position.">Top</div>
<div class="tooltipEl" data-placement="right" title="Tooltip in the right position.">Right</div>
<div class="tooltipEl" data-placement="bottom">Bottom</div>
<div class="tooltipEl" data-placement="left" >Left</div>
</div>
</div>
<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
$('.tooltipEl').tooltip({title: "Tooltip Text." });
});
</script>
4. Options
You can either specify options using data attribute or with a tooltip() method.
Syntax – With data attribute
Specify option-name after data in the element.
<div data-[option-name]="value" ></div>
Syntax – With tooltip()
$(selector).tooltip({ option-name: value });
Here, are some options –
- delay – It takes value in milliseconds and set delay while tooltip hide or show. Its default value is
0.
$('[data-toggle="tooltip"]').tooltip( { delay: 2000 } );
- placement – Position the tooltip – Top, Left, Right, and Bottom. The default value is
Top.
$('[data-toggle="tooltip"]').tooltip( { placement: "bottom" } );
- title – Define the tooltip text on the element.
$('[data-toggle="tooltip"]').tooltip( { title: "Tooltip text." } );
- trigger – When tooltip will trigger – click | hover | focus | manual. You can pass multiple events separated by space. But
manualdoesn’t work with other triggers. The default value is"hover focus".
$('[data-toggle="tooltip"]').tooltip( { trigger: "click" } );
- html – This takes a boolean value and allows to show HTML text in the tooltip. The default value is
false.
$('[data-toggle="tooltip"]').tooltip( { html: true } );
Example
<style>
.tooltipEl{
float: left;
margin-right: 10px;
margin-top: 50px;
}
</style>
<div class='container'>
<div >
<div class="tooltipEl" title="Tooltip Text">Click the text</div>
<div class="tooltipEl" >Click the text</div>
</div>
</div>
<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
$('.tooltipEl').tooltip({
delay: 500,
placement: "bottom",
title: "<span style='color: yellow;'>Tooltip</span> Text.",
html: true,
trigger: "click"
});
});
</script>
5. Methods
Syntax –
$( selector ).tooltip( method-name );
Here, are some methods –
- show – Display tooltip of the selector. If the
titleis not defined then it tooltip will not visible on the screen.
$('[data-toggle="tooltip"]').tooltip("show");
- hide – Hide the visible tooltip of the selector element.
$('[data-toggle="tooltip"]').tooltip("hide");
- toggle – This will hide the tooltip if it is visible otherwise hide it.
$('[data-toggle="tooltip"]').tooltip("toggle");
- dispose – Hide and destroy the tooltip from the selector.
$('[data-toggle="tooltip"]').tooltip("dispose");
Example
<style>
.tooltipEl{
float: left;
margin-right: 10px;
margin-top: 50px;
}
</style>
<div class='container'>
<div >
<div class="tooltipEl" title="Tooltip text.">Hover text</div>
</div>
<br>
<div style='margin-top: 70px;'>
<input type='button' value='Show' id='but_show' >
<input type='button' value='Hide' id='but_hide' >
<input type='button' value='Toggle' id='but_toggle' >
</div>
</div>
<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
// Initialize
$('.tooltipEl').tooltip();
// Show
$('#but_show').click(function(){
$('.tooltipEl').tooltip('show');
});
// Hide
$('#but_hide').click(function(){
$('.tooltipEl').tooltip('hide');
});
// Toggle
$('#but_toggle').click(function(){
$('.tooltipEl').tooltip('toggle');
});
});
</script>
6. Conclusion
Use title attribute or option to add tooltip text and initiate the element by calling tooltip() method.
This does not work on the hidden elements or if the title text is not specified.
Use methods to manually control the tooltip.
If you found this tutorial helpful then don't forget to share.