Tooltips

Use Leaf's custom tooltips to indicate extra information when hovering over certain elements.

Bootstrap 4 documentation
Tooltips

The following custom tooltips are completely based on the ones used by Bootstrap 4. Here's a simple example:

                                                        
<button type="button" class="btn btn-secondary btn-sm" data-toggle="tooltip" title="Tooltip text">
    Tooltip
</button>
Tooltip placement

By specifying data-placement you can set the placement of the tooltip when it shows up.

                                                        
<button type="button" class="btn btn-secondary btn-sm" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
    Tooltip on top
</button>
<button type="button" class="btn btn-secondary btn-sm" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
    Tooltip on right
</button>
<button type="button" class="btn btn-secondary btn-sm" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
    Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary btn-sm" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
    Tooltip on left
</button>
Variations

Of course you can change the styles of the element you place the tooltip on. Here are a few examples:

                                                        
<button type="button" class="btn btn-primary btn-sm" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
    Tooltip on top
</button>
<button type="button" class="btn btn-outline-secondary btn-md" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
    Tooltip on right
</button>
<button type="button" class="btn btn-tertiary btn-round btn-sm" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
    Tooltip on bottom
</button>
<button type="button" class="btn btn-primary btn-md" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
    Tooltip on left
</button>