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