Purpose Website UI Kit

Tooltips

Documentation and examples for adding custom tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.

Open Bootstrap Docs

Tooltips

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

Popovers

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

Popover variations

<button type="button" class="btn btn-sm btn-danger" data-container="body" data-toggle="popover" data-color="danger" data-placement="top" data-title="Please, help!" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Danger popover
</button>
<button type="button" class="btn btn-sm btn-warning" data-container="body" data-toggle="popover" data-color="warning" data-placement="right" data-title="Please, help!" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Warning popover
</button>
<button type="button" class="btn btn-sm btn-success" data-container="body" data-toggle="popover" data-color="success" data-placement="left" data-title="Please, help!" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Success popover
</button>