Bootstrap 4 Tooltip


Basic Tooltip

A tooltip in Bootstrap is a small pop-up box that appears when the user moves his mouse pointer over an element. To add it, you need to add the data-toggle = "tooltip" attribute. And you have to give the text you want in the title attribute.

To enable the tooltip, you need to initialize jQuery and call this method tooltip().

Example code

<button class="btn btn-primary" data-toggle="tooltip" title="Tooltip">
Hover me!</button>
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>

Tooltip data placement

To determine where the tooltip pop-up box will point to the element, you need to insert a data-placement attribute.

Top Tooltip

The tooltip will point the pop-up box to the top of the element. To do that, you need to insert the data-placement = "top" attribute.

Example code

<button class="btn btn-primary" data-placement="top" data-toggle="tooltip" title="Top Tooltip">Hover me!</button>

Bottom Tooltip

The tooltip will point the pop-up box to the bottom of the element. To do that, you need to insert the data-placement = "bottom" attribute.

Example code

<button class="btn btn-primary" data-placement="bottom" data-toggle="tooltip" title="Bottom Tooltip">Hover me!</button>

Left Tooltip

The tooltip will point the pop-up box to the left of the element. To do that, you need to insert the data-placement = "left" attribute.

Example code

<button class="btn btn-primary" data-placement="left" data-toggle="tooltip" title="Left Tooltip">Hover me!</button>

Right Tooltip

The tooltip will point the pop-up box to the Right of the element. To do that, you need to insert the data-placement = "right" attribute.

Example code

<button class="btn btn-primary" data-placement="right" data-toggle="tooltip" title="Right Tooltip">Hover me!</button>

Tooltip With Input Element

Example code

<input type="text" class="form-control" data-placement="bottom" data-toggle="tooltip" title="Enter your email">