Tooltip

Example: Simple tooltip

Use a simplified tooltip by supplying only (1) a label prop and (2) a child component.

import { Button, Tooltip } from 'matterial'

function TooltipExample() {
  return (
    <Tooltip label="Save">
      <Button shape="circle">💾</Button>
    </Tooltip>
  )
}

Example: Ariakit tooltip

Matterial's tooltip is built on top of Ariakit Tooltip, which has robust features that can be leveraged.

import { TooltipProvider, TooltipAnchor, Tooltip } from 'matterial'

function TooltipExample() {
  return (
    <TooltipProvider placement='bottom' timeout={100}>
      <TooltipAnchor render={<a href="https://ariakit.org/components/tooltip" />}>
        Tooltip
      </TooltipAnchor>
      <Tooltip>
        https://ariakit.org/components/tooltip
      </Tooltip>
    </TooltipProvider>
  )
}