Popovers

Use Leaf's custom popovers to indicate extra information when clicking on certain elements.

Bootstrap 4 documentation
Popovers

The following custom popovers 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-container="body" data-toggle="popover"title="Popover text" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover
</button>
Popover placement

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

                                                        
<button type="button" class="btn btn-secondary btn-sm" data-container="body" data-toggle="popover" data-placement="top" title="Popover on top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on top
</button>
<button type="button" class="btn btn-secondary btn-sm" data-container="body" data-toggle="popover" data-placement="right" title="Popover on right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on right
</button>
<button type="button" class="btn btn-secondary btn-sm" data-container="body" data-toggle="popover" data-placement="bottom" title="Popover on bottom" data-content="Vivamus
    sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on bottom
</button>
<button type="button" class="btn btn-secondary btn-sm" data-container="body" data-toggle="popover" data-placement="left" title="Popover on left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on left
</button>
Variations

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

                                                        
<button type="button" class="btn btn-primary btn-sm" data-container="body" data-toggle="popover" data-placement="top" title="Popover on top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on top
</button>
<button type="button" class="btn btn-secondary btn-sm" data-container="body" data-toggle="popover" data-placement="right" title="Popover on right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on right
</button>
<button type="button" class="btn btn-outline-secondary btn-md" data-container="body" data-toggle="popover" data-placement="bottom" title="Popover on bottom" data-content="Vivamus
    sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on bottom
</button>
<button type="button" class="btn btn-primary btn-sm" data-container="body" data-toggle="popover" data-placement="left" title="Popover on left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on left
</button>