Tooltip

View Source

Used to display a minimal amount of helpful information.

Left

Top

Bottom

Right

render(
  <StackView
    axis="horizontal"
    alignment="center"
    distribution="center"
    spacing={8}
  >
    <Tooltip placement="left" title="Tooltip">
      <Box>Left</Box>
    </Tooltip>
    <Tooltip placement="top" title="Tooltip">
      <Box>Top</Box>
    </Tooltip>
    <Tooltip placement="bottom" title="Tooltip">
      <Box>Bottom</Box>
    </Tooltip>
    <Tooltip placement="right" title="Tooltip">
      <Box>Right</Box>
    </Tooltip>
    <Button icon={{ name: 'general.search' }} tooltip={{ title: 'search' }} />
  </StackView>
)

render(
  <StackView
    axis="horizontal"
    alignment="center"
    distribution="center"
    spacing={8}
  >
    <Tooltip placement="left" title="Tooltip">
      <Box>Left</Box>
    </Tooltip>
    <Tooltip placement="top" title="Tooltip">
      <Box>Top</Box>
    </Tooltip>
    <Tooltip placement="bottom" title="Tooltip">
      <Box>Bottom</Box>
    </Tooltip>
    <Tooltip placement="right" title="Tooltip">
      <Box>Right</Box>
    </Tooltip>
    <Button icon={{ name: 'general.search' }} tooltip={{ title: 'search' }} />
  </StackView>
)

Custom Tooltip

render(
  <Tooltip
    title={
      <StackView width={24} spacing={1} cursor="default">
        <StackView axis="horizontal" alignment="center" spacing={1}>
          <Icon name="general.exclamationCircle" size="md" color="error" />
          <Text fontSize={3} weight={500} color="error">
            Error
          </Text>
        </StackView>
        <Text fontSize={3} lineHeight={3}>
          This action is not permitted.
        </Text>
      </StackView>
    }
    openDelay={0}
    closeDelay={300}
    popoverProps={{
      textAlign: 'left',
      paddingHorizontal: 2,
      paddingVertical: 2,
      backgroundColor: 'surface',
      color: 'foreground',
      stroke: 'separator',
      strokeWeight: 1,
      elevation: 2,
    }}
  >
    <Text>Custom Tooltip</Text>
  </Tooltip>
)

render(
  <Tooltip
    title={
      <StackView width={24} spacing={1} cursor="default">
        <StackView axis="horizontal" alignment="center" spacing={1}>
          <Icon name="general.exclamationCircle" size="md" color="error" />
          <Text fontSize={3} weight={500} color="error">
            Error
          </Text>
        </StackView>
        <Text fontSize={3} lineHeight={3}>
          This action is not permitted.
        </Text>
      </StackView>
    }
    openDelay={0}
    closeDelay={300}
    popoverProps={{
      textAlign: 'left',
      paddingHorizontal: 2,
      paddingVertical: 2,
      backgroundColor: 'surface',
      color: 'foreground',
      stroke: 'separator',
      strokeWeight: 1,
      elevation: 2,
    }}
  >
    <Text>Custom Tooltip</Text>
  </Tooltip>
)

Tooltip relative to the parent view.

render(() => {
  const ref = React.useRef()
  return (
    <StackView innerRef={ref} padding={4} backgroundColor="surfaceSecondary">
      <Tooltip title="Hello tooltip" popoverProps={{ relativeTo: ref }}>
        <Box>Tooltip relative to the parent view.</Box>
      </Tooltip>
    </StackView>
  )
})

render(() => {
  const ref = React.useRef()
  return (
    <StackView innerRef={ref} padding={4} backgroundColor="surfaceSecondary">
      <Tooltip title="Hello tooltip" popoverProps={{ relativeTo: ref }}>
        <Box>Tooltip relative to the parent view.</Box>
      </Tooltip>
    </StackView>
  )
})

Props

Themeable

Accepts Popover props.

Use the tooltip key in ThemeProvider to customize the default properties of this component.

asAs

childPropsobject

Passes props to Popover’s anchorElement.

childrenany

The child becomes the trigger for the tooltip, unless it is overridden with popoverProps={{relativeTo: ref}}.

closeDelaynumber

The amount of time in milliseconds before the tooltip closes.

defaultOpenboolean

Controls whether the Popover is rendered as open or closed.

keepInViewboolean

Attempts to keep popover in view clipping edges if too large.

openDelaynumber

The amount of time in milliseconds before the tooltip opens.

placementPlacement

Where to place the popover.

popoverPropsobject

Accepts any valid Popover props.

renderToHTMLElement | string

Where to render the composed popover into. Accepts an HTML element or selector. Uses the closest fixed parent or document.body by default. This will only be computed once on initial render.

titleany

The title of the tooltip. Accepts a string or a React element.

triggerOnFocusboolean

Reveals the tooltip when the cloned child receives focus.

triggerOnHoverboolean

Reveals the tooltip when the cloned child is hovered.

zIndexnumber

Set a specific z-index for Tooltip. (defaults to 10000) This option can be helpful in adjusting elements that overlap visually.

Props

PreviousScrim NextCheckbox