@invisionag/iris-react-tooltip
TypeScript icon, indicating that this package has built-in type declarations

6.7.2 • Public • Published
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}
/>

Readme

Keywords

none

Package Sidebar

Install

npm i @invisionag/iris-react-tooltip

Weekly Downloads

4

Version

6.7.2

License

MIT

Unpacked Size

46.7 kB

Total Files

9

Last publish

Collaborators

  • bgoeral
  • jj-ivx
  • ivx-github
  • jana_hehr
  • roberter26
  • birgithorn
  • alexj-ivx
  • amft
  • aitortomas
  • yashabfaryal0322
  • nleinich
  • johannesluedke
  • pgotthardt-ivx
  • hrabe
  • plore_ivx
  • patricialieske
  • plaudel
  • mblumtritt
  • sruehlemann
  • brerx
  • mbrendler
  • jens.zobel
  • cwaider
  • kattelans
  • ftrautmann
  • lutz.peukert
  • fruetel
  • schmitze333
  • csprle
  • beckerei
  • stefan.schiffer
  • ahx
  • cloudwaechter
  • tobias
  • alexmarold
  • t_klepzig
  • susahope
  • mwannewitz
  • ivx-circle-ci
  • yichang
  • ivx-jenkins