A tooltip to show additional information over another UI component.

![tooltip](https://user-images.githubusercontent.com/10867086/39633744-25b2003a-4fb9-11e8-9ee8-ea70306fe181.jpg)

# Usage
The tooltip is usually used to help the users understand the meaning of an element, like an icon or an image:

![tooltip-icon](https://user-images.githubusercontent.com/10867086/39634083-1edd76f8-4fba-11e8-8c25-1cd2a087f000.jpg)

Another common usage, is displaying the full content of a truncated text:

![tooltip-text](https://user-images.githubusercontent.com/10867086/39634114-319fe8d4-4fba-11e8-905e-6827e763a5fd.jpg)

# Variants

## Position
The tooltip should be positioned accordingly to where the UI component is relative to the page to ensure it will always be visible inside the screen.

![tooltip-position](https://user-images.githubusercontent.com/10867086/39634394-fddeb89e-4fba-11e8-8334-107f4024e909.jpg)

## Dark or light
Tooltips are *dark* by default, but they can also be *light*.
Use a *light* tooltip when you want to show a message over a dark background:

![tooltip-dark light](https://user-images.githubusercontent.com/10867086/39636922-e0ab1a22-4fc1-11e8-8a70-5e4ed73d829b.jpg)

## Open on hover or click
By default the tooltip is displayed whenever the user overs the element below.
If you want the tooltip to remain visible after an action, you may show it and hide it when the user clicks the element instead of simply overing it.

![tooltip-click](https://user-images.githubusercontent.com/10867086/39636972-0df0ebf6-4fc2-11e8-93ed-61d11f22542d.jpg)
