# Tooltips

Tooltip helper. These are pseudo based so they only work on elements that can have content.

## Example

<script async src="//jsfiddle.net/stuartaccent/6c24xkgz/embed/html,result/"></script>

## Variables

Below are the default variables, adjust any of these before you import the component.

```scss
$tooltip-background:            color("black") !default;
$tooltip-text-color:            color("white") !default;
$tooltip-font-size:             90% !default;
$tooltip-padding:               0.5rem 1rem !default;
$tooltip-arrow-height:          6px !default;
$tooltip-border-radius:         $global-radius !default;
$tooltip-transition:            opacity $animation-speed-fast ease-in-out !default;
```