The Tooltips in Bootstrap 4
The Bootstrap 4 Tooltips are built by using CSS and JavaScript that uses CSS3 for animation.
The Tooltips can be displayed in various directions explicitly (left, right, top and bottom). The positioning of tooltips is set by using the third party library (popper.js) that must be included before the reference of Bootstrap 4 JS file.
all directions example HTML tooltip in form demo
In the following section, I will show you various examples of creating tooltips. These include simple with default direction, in all directions, tooltips with HTML content, customizing the appearance of tooltip and more.
An example of basic tooltip
In the first example, the tooltip is associated with a button element. As you hover over the button, the tooltip displays in default position – the top.
The button is given a unique ID which is referred in the jQuery code for initiating the tooltip as follows:
See online demo and code
The markup:
|
1 2 3 4 5 |
<button type="button" id="tooltip-demo" class="btn btn-danger" title="A demo of simple tooltip"> Tooltip Demo </button> |
The script:
|
1 2 3 4 5 6 7 8 9 |
<script> $(function () { $('#tooltip-demo').tooltip() }) </script> |
You need to include dependency files in the <head> section that you can see on the example page.
Displaying tooltips in all directions
Use the data-placement attribute with any of the following values for displaying tooltip in the desired direction:
- top
- bottom
- left
- right
Besides, the demo uses data-toggle=”tooltip” attribute in the button tag which is also referred in the jQuery code for initiating all tooltips at a single call. Have a look at the demo with four buttons in all directions:
See online demo and code
The markup:
|
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 |
<div class="container"> <h3 class="text-info">Tooltip Demo in all directions</h3> <br /><br /><br /><br /> <button type="button" id="tooltip-demo" class="btn btn-danger" data-toggle="tooltip" data-placement="left" title="Left"> Left Demo </button> <button type="button" id="tooltip-demo" class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="A demo of bottom tooltip"> Bottom Demo </button> <button type="button" id="tooltip-demo" class="btn btn-warning" data-toggle="tooltip" data-placement="top" title="A demo of top tooltip"> Top Demo </button> <button type="button" id="tooltip-demo" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="A demo of right tooltip"> Right Demo </button> </div> |
The script for initializing all tooltips:
|
1 2 3 4 5 6 7 8 9 |
<script> $(function () { $('[data-toggle="tooltip"]').tooltip() }) </script> |
You may also create tooltips with HTML. Use <p> tags for text paragraph, links, images, heading etc. All you need to do is adding the data-html=”true” attribute and using the HTML tags inside the title attribute for the tooltip.
The following example shows using various tags:
See online demo and code
The HTML code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="container"> <h3>Tooltip with HTML demo</h3> <br /><br /><br /><br /> <button type="button" class="btn btn-info" data-toggle="tooltip" data-html="true" title="<p>Use Paragraph of text</p> <a href='https://www.jquery-az.com/'>Links</a> <br/> and image <img src='https://www.jquery-az.com/wp-content/uploads/2015/10/logo.jpg' width='175'>""> The example of Tooltip with HTML </button> </div> |
Customizing the tooltip appearance
Want to use some other color scheme for the tooltip than the default dark? For that, you may override the .tooltip and its related classes and apply your own style as per desire or to match with the theme of your website.
Precisely, the .tooltip-inner class defines the inner tooltip layout that I have overridden in the example below:
See online demo and code
The CSS used in the <style> section:
|
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 |
<style> .tooltip-inner{ padding:2px 7px; color:#55AAAA; text-align:center; font-weight:900; background: -webkit-gradient(linear, left top, left 25, from(#F4F4F4), color-stop(4%, #B4C8D6), to(#F4F4F4)); background: -moz-linear-gradient(top, #F4F4F4, #B4C8D6 1px, #F4F4F4 25px); border: 1px solid #55AAAA; -webkit-border-radius:9px; -moz-border-radius:9px; border-radius:9px; } </style> |
See the complete code and output on the demo page.
Associating custom tooltip with a link
You may associate a tooltip with different HTML elements. In all above examples, I used tooltip with buttons. In this example, the tooltip will display as you hover over the link. This tooltip also uses a custom style with various data attributes:
See online demo and code
The markup:
|
1 2 3 4 5 |
<a class="text-dark" data-toggle="tooltip" data-html="true" data-placement="right" title="Custom Tooltip with a link"> Tooltip in Link </a> |
The CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.tooltip-inner{ padding:6px 7px; color:#912F00; text-align:center; font-weight:900; background: -webkit-gradient(linear, left top, left 25, from(#FFEEE6), color-stop(4%, #FFEEE6), to(#FFEEE6)); background: -moz-linear-gradient(top, #F4F4F4, #B4C8D6 1px, #F4F4F4 25px); border: 1px solid #912F00; -webkit-border-radius:9px; -moz-border-radius:9px; border-radius:4px; } |
Using tooltip in a form example
One other important use of tooltips is in Bootstrap 4 based forms. For example, if you have a password field, you may guide a user about the password requirement in a prominent tooltip with information in list format.
See this example online and bring the mouse over any textbox, especially password for seeing how HTML tooltip appears:
See online demo and code
The markup of the form with tooltips:
|
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 38 39 40 41 42 43 44 45 |
<div class="container"> <form> <div class="form-group"> <label for="NameDemo">Your Name:</label> <input type="text" class="form-control" id="NameDemo" data-toggle="tooltip" data-placement="left" aria-describedby="nameHelp" title="Please enter your full name"> </div> <div class="form-group"> <label for="EmailDemo">Your Email:</label> <input type="email" class="form-control" id="EmailDemo" data-toggle="tooltip" data-placement="left" aria-describedby="emailHelp" title="Please enter your email address"> </div> <div class="form-group"> <label for="passDemo">Enter Password:</label> <input type="password" class="form-control" id="passDemo" data-toggle="tooltip" data-html="true" data-placement="left" aria-describedby="passHelp" title="The password must be:<ul><li>8 characters long</li> <li>Start with capital letter</li><li>Contains a special character</li></ul>"> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" id="CheckDemo"> <label class="form-check-label" for="CheckDemo">Agree with Terms & Conditions?</label> </div> <button type="submit" class="btn btn-success">Create Account</button> </form> </div> |
You can see, the title is used in the form control tags. In the password field, the data-html=”true” is also used and in the title attribute, the <ul> and <li> tags are used for creating bulleted information.
The same script is used for initializing the tooltips as in above examples with data-toggle=”tooltip”.