if you are new to Bootstrap.
Tool-tip shows the small description of the action in the web page. Bootstrap comes with some predefined Tool-tips that might be useful in our applications.
Objective
The main objective of this article is to learn different types of Tooltips with Bootstrap.
Using Bootstrap code
We have to write little JavaScript to generate tooltips in Bootstrap.Observe the below code that is used to display normal tooltip in your browser.
Tooltips with Delay:
We can also set some delay to the tool-tip. Please go with below script to achieve that,
<script type="text/javascript">
$(document).ready(function () {
$(".tooltip-bar a").tooltip({
delay: { show : 1000 }
});
});
</script>
and the View Page as follows,
<div class="bar">
<ul class="tooltip-bar list-inline">
<li><a href="#" class="btn btn-primary" data-toggle="tooltip" data-original-title="Home">Home</a></li>
<li><a href="#" class="btn btn-success" data-toggle="tooltip" data-original-title="Tutorials">Tutorials</a></li>
<li><a href="#" class="btn btn-warning" data-toggle="tooltip" data-original-title="Videos">Videos</a></li>
</ul>
</div>
Now run and see the variation in your output in which the tooltip appears after 1 second,
Tooltips with Title from JavaScript:
We can also set tooltips from JavaScript that appears if there is no title given in the view code like below
<div class="bar">
<ul class="tooltip-bar list-inline">
<li><a href="#" class="btn btn-primary" data-toggle="tooltip">Home</a></li>
<li><a href="#" class="btn btn-success" data-toggle="tooltip" data-original-title="Tutorials">Tutorials</a></li>
<li><a href="#" class="btn btn-warning" data-toggle="tooltip" data-original-title="Videos">Videos</a></li>
</ul>
</div>
And the JavaScript is,
<script type="text/javascript">
$(document).ready(function () {
$(".tooltip-bar a").tooltip({
title: "Hi, Welcome here"
});
});
</script>
If you Observe the above code, we didn't given any title to the
Home. So it will shows the title of the JavaScript like below
Tooltip Positions:
There is a placement
property in Bootstrap's JavaScript that is used to set the position of the Tooltip.
Take a look at the below Script which explains the tooltip positions,
<script type="text/javascript">
$(document).ready(function () {
$(".bar-top").tooltip({ placement: 'top' });
$(".bar-right").tooltip({ placement: 'right' });
$(".bar-bottom").tooltip({ placement: 'bottom' });
$(".bar-left").tooltip({ placement: 'left' });
});
</script>
And the code in View Page as follows,
<div class="bar">
<ul class="list-inline">
<li><a href="#" class="btn btn-primary bar-top" data-toggle="tooltip" data-original-title="Home" data-placement="top">Home</a></li>
<li><a href="#" class="btn btn-success bar-bottom" data-toggle="tooltip" data-original-title="Tutorials" data-placement="bottom">Tutorials</a></li>
<li><a href="#" class="btn btn-warning bar-left" data-toggle="tooltip" data-original-title="Videos" data-placement="left">Videos</a></li>
<li><a href="#" class="btn btn-danger bar-right" data-toggle="tooltip" data-original-title="Settings" data-placement="right">Settings</a></li>
</ul>
</div>
If you run the above combination of code, you will see the output something like below in your browser,
Tooltip actions from JavaScript:
We can also show
, hide
, toggle
or destroy
the Tooltips manually with some JavaScript properties of Bootstrap.
Lets see the below code which explains such scenarios,
JavaScript:
<script type="text/javascript">
$(document).ready(function () {
$(".show-bar").click(function () {
$(".tooltip-bar a").tooltip('show');
});
$(".hide-bar").click(function () {
$(".tooltip-bar a").tooltip('hide');
});
$(".toggle-bar").click(function () {
$(".tooltip-bar a").tooltip('toggle');
});
$(".destroy-bar").click(function () {
$(".tooltip-bar a").tooltip('destroy');
});
});
</script>
View Page:<div class="bar">
<p class="tooltip-bar">
<a href="#" class="btn btn-default" data-toggle="tooltip" title="Welcome to Home">Home</a>
</p>
<div>
<p>Below are Tooltip actions from JavaScript</p>
<input type="button" class="btn btn-success show-bar" value="Show" />
<input type="button" class="btn btn-primary hide-bar" value="Hide" />
<input type="button" class="btn btn-warning toggle-bar" value="Toggle" />
<input type="button" class="btn btn-danger destroy-bar" value="Destroy" />
</div>
</div>
Run the above code in your browser and you might see the output something like below
Conclusion
In this article, we have seen different properties of Tooltips in Bootstrap. If you have any doubts in this topic, please feel free to ask below.
Thanks for reading.
Krishna.