Bootstrap 4 Tooltips

Bootstrap 4 tooltips are a small popup box that display information whenever use moves the mouce pointer to the element such as link or button.

To create bootstrap 4 tooltip, follow the following steps.

Place data-toggle="tooltip" attribute to an element such as link or button.
Place title="Write Your Information" attribute to an element such as link or button and write your information within title attribute.This title message will be displayed in front of the user after placing the mouse pointer to the element.
Initialize bootstrap tooltip by jquery through selecting link or button.

<script type="text/javascript">
$(document).ready(
function(){
 $('[data-toggle="tooltip"]').tooltip();
});
 </script>

Try it now

Bootstrap 4 Tooltip

Note:In the above example, the tooltip is initialized with the bootstrap tooltip method using jquery.

Bootstrap tooltip is used to display information when users hover, focus, or tap an element.

Use data-placement attribute to change tooltip direction like top, bottom, left or the right side of the element.

Left Tooltip

Right Tooltip

Try it now

Note: In the above example data attribute data-placement is used to provide tooltip direction.

Question set 1