2015-11-05 09:57:12 +03:00
# Tooltip
2016-08-07 19:55:31 +03:00
A Tooltip is useful to show information on hover in any kind of component. We have a component that can be used as a **decorator** for any kind of component. Also, it's factory function is exposed so you can create your own decorator with specific properties.
2015-11-05 09:57:12 +03:00
<!-- example -->
```jsx
2015-11-10 13:07:43 +03:00
import Button from 'react-toolbox/lib/button';
import Tooltip from 'react-toolbox/lib/tooltip';
2016-01-06 01:32:38 +03:00
import Link from 'react-toolbox/lib/link';
2015-11-05 09:57:12 +03:00
2015-11-29 14:39:55 +03:00
const TooltipButton = Tooltip(Button);
const TooltipInput = Tooltip(Input);
2016-01-06 01:32:38 +03:00
const TooltipLink = Tooltip(Link);
2015-11-29 14:39:55 +03:00
2015-11-05 09:57:12 +03:00
const TooltipTest = () => (
< div >
2015-11-29 14:39:55 +03:00
< TooltipButton label = 'Bookmark' icon = 'bookmark' raised primary tooltip = 'Bookmark Tooltip' tooltipDelay = {1000} / >
< TooltipButton icon = 'add' floating accent tooltip = 'Floating Tooltip' / >
2016-01-06 01:32:38 +03:00
< TooltipLink count = {42} href = "#" label = "The answer is" icon = 'speaker_notes' tooltip = 'Question - universe?' / >
2015-11-29 14:39:55 +03:00
< TooltipInput tooltip = 'lorem ipsum...' / >
2015-11-05 09:57:12 +03:00
< / div >
);
```
2016-05-30 08:07:50 +03:00
This component can be styled by context providing a theme with the key `RTTooltip` through the theme provider.
2015-11-05 09:57:12 +03:00
## Properties
2015-11-29 14:39:55 +03:00
In any component you decorate with the Tooltip you'd get some additional props:
2016-03-25 20:06:09 +03:00
| Name | Type | Default | Description|
2015-11-05 09:57:12 +03:00
|:-----|:-----|:-----|:-----|
2016-03-25 20:06:09 +03:00
| `className` | `String` | `''` | Sets a class to give customized styles to the tooltip.|
| `onClick` | `Function` | | Callback to be invoked when Component is clicked.|
| `onMouseEnter` | `Function` | | Callback called when the mouse enters the Component.|
| `onMouseLeave` | `Function` | | Callback called when the mouse leaves the Component.|
| `tooltip` | `String` | | The text string to use for the tooltip.|
| `tooltipDelay` | `Number` | | Amount of time in miliseconds spent before the tooltip is visible.|
| `tooltipHideOnClick` | `Boolean` | `true` | If true, the Tooltip hides after a click in the host component.|
2016-08-07 21:51:31 +03:00
| `tooltipPosition` | `String` | `vertical` | Determines the position of the tooltip. It can be automatic with `vertical` and `horizontal` values or forced with `bottom` , `top` , `left` or `right` .|
2016-05-26 22:17:25 +03:00
## Theming
| Name | Description|
|:---------|:-----------|
2016-08-07 21:51:31 +03:00
| `tooltip` | Added to the tooltip element wrapper.|
2016-05-26 22:17:25 +03:00
| `tooltipActive` | Added to the root when the tooltip is active.|
2016-08-07 21:51:31 +03:00
| `tooltipBottom` | Added to the root in case the tooltip is being positioned at bottom.|
| `tooltipInner` | Added to the inner element which sets the background, font and rounded borders.|
| `tooltipLeft` | Added to the root in case the tooltip is being positioned at left.|
| `tooltipRight` | Added to the root in case the tooltip is being positioned at right.|
| `tooltipTop` | Added to the root in case the tooltip is being positioned at top.|