Material Admin Extended Dark

## Tooltips and Popovers

## Tooltips

Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.

Tooltip is a Bootstrap component and you can find it's complete documentation with more examples at: http://getbootstrap.com/javascript/#tooltips

    <!-- Tooltip on the left -->
    <button type="button" class="btn btn--light" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

    <!-- Tooltip on the top(default) -->
    <button type="button" class="btn btn--light" data-toggle="tooltip" title="Tooltip on top">Tooltip on top</button>

    <!-- Tooltip on the bottom -->
    <button type="button" class="btn btn--light" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

    <!-- Tooltip on the right -->
    <button type="button" class="btn btn--light" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Source files:

- LESS: `/less/inc/bootstrap-overrides/tooltip.less`
- HTML: `/components.less`

## Popovers

Add small overlays of content, like those on the iPad, to any element for housing secondary information. Popovers whose both title and content are zero-length are never displayed.

Popover is a Bootstrap component and you can find it's complete documentation with more examples at: http://getbootstrap.com/javascript/#tooltips

#### Basic example

    <!-- popover on left -->
    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on left
    </button>

    <!-- popover on top -->
    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on top
    </button>

    <!-- popover on bottom -->
    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
    sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on bottom
    </button>

    <!-- popover on right -->
    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on right
    </button>

#### Popover on hover

    <button type="button" class="btn btn-default" data-trigger="hover" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on hover
    </button>

Source files:

- LESS: `/less/inc/bootstrap-overrides/popover.less`
- HTML: `/components.less`