Bootstrap Tooltip: 7 Simple and customized Tooltips demos
The tooltip plugin of Bootstrap Framework
By using the Tooltip.js plugin of Bootstrap framework, you may create tooltips for different elements like buttons, links, text boxes etc. quite easily.
I will show you how to create simple and customized tooltips with online examples in this tutorial.
You may click on any image or link below the image for seeing the live demos.
A simple example of Bootstrap tooltip
In this demo, a tooltip is attached to a button that uses the Bootstrap class. See this online which is followed by how to create it.
See online demo and code
These are a few main points to create tooltips:
You have to include the jQuery library as well to call the tooltips along with Bootstrap CSS and JS libraries. By default, the direction of the tooltip is on top of the element.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript"> $(document).ready(function(){ $("#tooltipex").tooltip({ }); }); </script> |
You may set the direction by using the placement option in the script section. See the next example that used placement option.
The title attribute of the element, in that case, a button, is used as the tooltip text.
|
1 |
<button type="button" id="tooltipex" class="btn btn-danger" title="A Tooltip with default direction">A Tooltip demo</button> |
By default, the tooltip background color is black with white text.
You may also use the data attribute to set the options for tooltips, for example:
|
1 |
<button type="button" id="tooltipex" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="A Tooltip with default direction" class="btn btn-danger" >A Tooltip demo</button> |
However, you still need to trigger this in JavaScript section.
A demo of Bootstrap tooltips in all directions
In this demo, four buttons are used to show the tooltips in all directions i.e. top, bottom, left and right.
See this online:
See online demo and code
The tooltip component has a few options that you may set in the script section. The placement is an option that can be used to set the direction of the tooltip. In the demo, I have used four placements for the buttons, one for each:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<script type="text/javascript"> $(document).ready(function(){ $("#toptip").tooltip({ placement:"top" }); $("#bottomtip").tooltip({ placement:"bottom" }); $("#lefttip").tooltip({ placement:"left" }); $("#righttip").tooltip({ placement:"right" }); }); </script> |
Note: You may also use data attribute to pass the option rather using the JavaScript.
Tooltip Bootstrap in a textbox
You may also attach tooltips to the textboxes in Bootstrap forms. The process remains the same as I used in the buttons example. See the demo online:
See online demo and code
So, you just need to give a title in a textbox field and call it in the script section. The code for the textbox is:
|
1 |
<input type="input" class="form-control" id="name1" title="Enter Your Full Name"> |
(You can see full code in the demo page)
Customizing the tooltips
Until now, you have seen only default tooltip styles as set in the Bootstrap CSS. By overriding the tooltip classes, you may customize the look of tooltips as per need or to match the website theme.
Following are a few examples of Bootstrap tooltip customization.
Tooltips with different colors for each direction
In this demo, each direction i.e. top, bottom, left and right are given different background colors. The tooltips are attached to button elements.
See the demo online.
See online demo and code
Following classes are used for each direction.
For top tooltip:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.tooltip.top .tooltip-inner{ max-width:310px; padding:3px 8px; color:#000; text-align:center; background-color:red; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px } |
For bottom tooltip:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.tooltip.bottom .tooltip-inner{ max-width:310px; padding:3px 8px; color:#fff; text-align:center; background-color:#245973; border-radius:5px } |
For the left tooltip:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.tooltip.left .tooltip-inner{ max-width:310px; padding:3px 8px; color:#000; text-align:center; background-color:#FF9A35; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px } |
For the right tooltip:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.tooltip.right .tooltip-inner{ max-width:310px; padding:3px 8px; color:#fff; text-align:center; background-color:#CC0000; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px } |
There are a few other classes as well to manage arrows or other properties. Have a look at the style tag in the head section in the demo page.
A custom tooltip with CSS3 properties
In this demo, more CSS 3 properties are used to customize the tooltip. I have added linear radiant background along with border-radius properties. See it online:
See online demo and code
A tooltip with HTML elements
Moreover, you may add HTML elements like h1 heading, paragraphs, links, images etc. in Bootstrap tooltips.
The following demo shows how:
See online demo and code
So what is done there?
I simply used HTML tags for the link, heading and image inside the title of a link that shows a tooltip.
|
1 |
<a title="<h3>You may use headings</h3> <a href='https://www.jquery-az.com/'>Links</a> images as well <img src='https://www.jquery-az.com/wp-content/uploads/2015/10/logo.jpg' width='175'>" data-html="true" rel="tooltip" href="#">Bring mouse over this text!</a> |
The div element containing the link is called in the JavaScript section:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> $(document).ready(function(){ $('.tooltip-demo').tooltip({ selector: "a[rel=tooltip]", placement: "bottom" }) }); </script> |
The same custom CSS is used to style the tooltip borders, background etc. as in the above example (See style section). That’s it! An HTML tooltip in Bootstrap forms is shown below with more details.
Custom Tooltips in Bootstrap form
The final demo is to show custom tooltips in Bootstrap form. As you enter the cursor or bring the mouse over a textbox, it will show a tooltip attached to it.
See online demo and code
Simple tooltips are attached to textboxes except password where it used HTML tooltip. To show HTML tooltip you have to specify the selector in script section:
|
1 2 3 4 5 6 7 |
$(".col-sm-3").tooltip({ selector: "input[rel=tooltip]", placement:"right" }); |
While the field that is showing HTML tooltip uses data attributes:
|
1 |
data-html="true" rel="tooltip" |
The complete password field is:
|
1 2 3 4 5 6 7 |
<input type="password" class="form-control inputstl" id="password1" title="<b>Enter password that must be:</b> <br>6-24 characters long <br>Must contain a number <br>Must contain a capital letter" data-html="true" rel="tooltip"> |
You may use different HTML tags there to display tooltips.