Tooltip from '@invisionag/iris-react-tooltip';
Tooltip
Tooltip Component for displaying context specific information.
Props
tooltipOffset
Expects an object containing an x
and a y
key with string values. Offset gets applied to the tooltip as positioning relative to its anchor from the bottom left.
Example:
<Tooltip
renderAsAnchor={() => <span>Click me!</span>}
renderTooltipContent={() => <div>I am the Tooltip!</div>}
tooltipOffset={{x: '0', y: '-10px'}}
/>
as Anchor
Hoverable
Usage:
<Tooltip
renderAsAnchor={() => <span>Click me!</span>}
renderTooltipContent={() => <div>I am the Tooltip!</div>}
/>
Clickable
Usage:
<Tooltip
clickable
renderAsAnchor={() => <span>Click me!</span>}
renderTooltipContent={() => <div>I am the Tooltip!</div>}
/>
You can pass a width
prop to the tooltip, which will determine the width the tooltip will expand to before linebreaking:
<Tooltip
clickable
width="100px"
renderAsAnchor={() => <span>Click me!</span>}
renderTooltipContent={() => <div>I am the Tooltip!</div>}
/>
with Ref
The Tooltip which is controlled with a react reference can be assigned additional props because it expects to be confirmed.
Usage:
<Tooltip
renderWithRef={({ setPositionByRef }) => <div ref={setPositionByRef}>Click me!</span>}
renderTooltipContent={() => <div>I am the Tooltip!</div>}
renderConfirm={() => 'Confirm'}
onClose={closeHandlerFunction}
/>
You can pass a width
prop to the tooltip, which will determine the width the tooltip will expand to before linebreaking:
<Tooltip
width="100px"
renderWithRef={({ setPositionByRef }) => <div ref={setPositionByRef}>Click me!</span>}
renderTooltipContent={() => <div>I am the Tooltip!</div>}
renderConfirm={() => 'Confirm'}
onClose={closeHandlerFunction}
/>