# Boomerang 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>