# Tooltip

Easily create a nicely looking tooltip.

## Usage

To apply this component, add the `data-uk-tooltip` attribute to an element. You also need to add a title attribute, whose value will represent your tooltip's text.

### Example

Hover me

### Markup

    <button class="uk-button" data-uk-tooltip title="">...</button>
    <span data-uk-tooltip title="">...</span>

## Alignment

Add one of the following options to the `data-uk-tooltip` attribute to adjust the tooltip's alignment.

Attribute | Description | Example
--- | --- | ---
`pos:'top'` | Aligns the tooltip to the top. |
`pos:'top-left'` | Aligns the tooltip to the top left. |
`pos:'top-right'` | Aligns the tooltip to the top right. |
`pos:'bottom'` | Aligns the tooltip to the bottom. |
`pos:'bottom-left'` | Aligns the tooltip to the bottom left. |
`pos:'bottom-right'` | Aligns the tooltip to the bottom right. |
`pos:'left'` | Aligns the tooltip to the left. |
`pos:'right'` | Aligns the tooltip to the right. |

### Markup

    <button class="uk-button" data-uk-tooltip="{pos:'bottom-left'}" title="">...</button>

## JavaScript options

This is an example of how to set options via attribute:

    data-uk-tooltip="{pos:'bottom-left'}"

Option | Possible value | Default | Description
--- | --- | --- | ---
`offset` | integer | 5 | Offset to the source element
`pos` | string | 'top' | Tooltip position
`animation` | boolean | false | Fade in tooltip
`delay` | integer | 0 | Delay tooltip show in ms
`cls` | string | '' | Custom class to add on show
`activeClass` | string | 'uk-active' | Toggled active class