##### Tooltips

settings Settings arrow_drop_down

- Access1
- Profile2
- Notifications

Tooltips are small, interactive, textual hints for mainly graphical elements. When using icons for actions you can use a tooltip to give people clarification on its function.

#### Tooltips

Add the Tooltipped class to your element and add either top, bottom, left, right on data-tooltip to control the position.

Bottom Top Left Right

    <!-- data-position can be : bottom, top, left, or right -->
    <!-- data-delay controls delay before tooltip shows (in milliseconds)-->
    <a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am a tooltip">Hover me!</a>

Words Tooltips

Add the Tooltipped class to your element and add either top, bottom, left, right on data-tooltip to control the position.

#### Initialization

Tooltips are initialized automatically, but if you have dynamically added tooltips, you will need to initialize them.

    $(document).ready(function(){
    $('.tooltipped').tooltip({delay: 50});
    });

#### jQuery Plugin Options

Option Name | Description
--- | ---
delay | Delay time before tooltip appears. (Default: 350)
tooltip | Tooltip text. Can use custom HTML if you set the html option.
position | Set the direction of the tooltip. 'top', 'right', 'bottom', 'left'. (Default: 'bottom')
html | Allow custom html inside the tooltip. (Default: false)

#### Removal

To remove the tooltip from the button, pass in `'remove'` as the option to the tooltip function

    // This will remove the tooltip functionality for the buttons on this page
    $('.tooltipped').tooltip('remove');

add

- help_outline
- widgets
- today
- mail_outline