@invisionag/iris-react-tooltip

```js Tooltip from '@invisionag/iris-react-tooltip'; ```

Stats

StarsIssuesVersionUpdatedCreatedSize
@invisionag/iris-react-tooltip
6.7.23 months ago4 years agoMinified + gzip package size for @invisionag/iris-react-tooltip in KB

Readme

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}
/>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.