Tooltip

Displays some info text when you're hovering a component.

Examples

Basic example. The Tooltip's default position is 'top'.

<Tooltip message="Atti-Components rocks !">
  <Text>Hover me</Text>
</Tooltip>

<Tooltip message="Atti-Components rocks !">
  <Text>Hover me</Text>
</Tooltip>

You can either set a string in the tooltip's message bubble, or a custom component, as follow.

<Tooltip
  message={
    <Text>
      I am a custom <strong>text component</strong>
    </Text>
  }
>
  <Text>Hover me</Text>
</Tooltip>

<Tooltip
  message={
    <Text>
      I am a custom <strong>text component</strong>
    </Text>
  }
>
  <Text>Hover me</Text>
</Tooltip>

Advanced example. You can set the tooltip's position.

const Example = () => {
  const [position, setPosition] = useState('top')

  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <div style={{ width: '150px' }}>
        <Select
          id="position"
          onChange={e => setPosition(e.target.value)}
          options={['top', 'right', 'bottom', 'left']}
          value={position}
        />
      </div>
      <div style={{ textAlign: 'center', flexGrow: '1' }}>
        <Tooltip position={position} message="Atti-Components rocks !">
          <Text>Hover me</Text>
        </Tooltip>
      </div>
    </div>
  )
}

render(<Example />)

const Example = () => {
  const [position, setPosition] = useState('top')
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <div style={{ width: '150px' }}>
        <Select
          id="position"
          onChange={e => setPosition(e.target.value)}
          options={['top', 'right', 'bottom', 'left']}
          value={position}
        />
      </div>
      <div style={{ textAlign: 'center', flexGrow: '1' }}>
        <Tooltip position={position} message="Atti-Components rocks !">
          <Text>Hover me</Text>
        </Tooltip>
      </div>
    </div>
  )
}
render(<Example />)

You can use the tooltip around an inline or a block element.

<Tooltip message="Atti-Components rocks !">
  <div>
    <Text>
      This is a very long text inside a block element. Its purpose is to show that a tooltip can be
      placed around a block element as well. This is a very long text inside a block element. Its
      purpose is to show that a tooltip can be placed around a block element as well. This is a very
      long text inside a block element. Its purpose is to show that a tooltip can be placed around a
      block element as well.
    </Text>
    <br />
    <Text>
      This is a very long text inside a block element. Its purpose is to show that a tooltip can be
      placed around a block element as well. This is a very long text inside a block element. Its
      purpose is to show that a tooltip can be placed around a block element as well. This is a very
      long text inside a block element. Its purpose is to show that a tooltip can be placed around a
      block element as well.
    </Text>
  </div>
</Tooltip>

<Tooltip message="Atti-Components rocks !">
  <div>
    <Text>
      This is a very long text inside a block element. Its purpose is to show that a tooltip can be
      placed around a block element as well. This is a very long text inside a block element. Its
      purpose is to show that a tooltip can be placed around a block element as well. This is a very
      long text inside a block element. Its purpose is to show that a tooltip can be placed around a
      block element as well.
    </Text>
    <br />
    <Text>
      This is a very long text inside a block element. Its purpose is to show that a tooltip can be
      placed around a block element as well. This is a very long text inside a block element. Its
      purpose is to show that a tooltip can be placed around a block element as well. This is a very
      long text inside a block element. Its purpose is to show that a tooltip can be placed around a
      block element as well.
    </Text>
  </div>
</Tooltip>

Theme

Props

Name	Type	Default value
children required	union	null
message required	union	null
position	custom	'top'