react-toolbox/components/tooltip

Tooltip

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. You just have to take into account that the overflow in the component should be visible.

Tooltips are themeable under the key ToolboxTooltip. Check the configuration at github.

import Button from 'react-toolbox/lib/button';
import Tooltip from 'react-toolbox/lib/tooltip';
import Link from 'react-toolbox/lib/link';
// Remember to provide a default theme using the provider

const TooltipButton = Tooltip(Button);
const TooltipInput = Tooltip(Input);
const TooltipLink = Tooltip(Link);

const TooltipTest = () => (
  <div>
    <TooltipButton label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' tooltipDelay={1000} />
    <TooltipButton icon='add' floating accent tooltip='Floating Tooltip' />
    <TooltipLink count={42} href="#" label="The answer is" icon='speaker_notes' tooltip='Question - universe?'/>
    <TooltipInput tooltip='lorem ipsum...' />
  </div>
);

Properties

In any component you decorate with the Tooltip you'd get some additional props:

Name	Type	Default	Description
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.

Theming

Name	Description
tooltip	Added to the tooltip element.
tooltipActive	Added to the root when the tooltip is active.
tooltipWrapper	Wrapper for the root element used to position the tooltip.