Tooltips

Tooltips are small popups that appear when you hover over an element. They provide additional context without cluttering the interface.

Setting Up Tooltips

Tooltips must be initialised with JavaScript:

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

Basic Tooltip

<button class="btn btn-default" data-toggle="tooltip" title="Click to save">
    Save
</button>

Tooltip Positions

<button data-toggle="tooltip" data-placement="top" title="Top">Top</button>
<button data-toggle="tooltip" data-placement="bottom" title="Bottom">Bottom</button>
<button data-toggle="tooltip" data-placement="left" title="Left">Left</button>
<button data-toggle="tooltip" data-placement="right" title="Right">Right</button>

Tooltip on Links

<p>
    Visit <a href="#" data-toggle="tooltip" title="Go to homepage">Home</a>
    for more info.
</p>

Popovers

Popovers are similar to tooltips but can hold more content:

<script>
$(function() {
    $('[data-toggle="popover"]').popover();
});
</script>

<button class="btn btn-primary"
        data-toggle="popover"
        title="Popover Title"
        data-content="This is the popover body content. It can be longer than a tooltip.">
    Click me
</button>

Popover Options

<!-- Trigger on hover -->
<button data-toggle="popover" data-trigger="hover"
        title="Hover Popover" data-content="This appears on hover">
    Hover me
</button>

<!-- Placement -->
<button data-toggle="popover" data-placement="bottom"
        title="Bottom" data-content="Bottom popover">
    Bottom
</button>