Tooltip

Tooltips display informative text on hover, focus, or tap, and automatically label the target element for accessibility.

For icon-only buttons, consider using HvIconButton, which includes built-in tooltip behavior.

Source Code

uikit-react-core

enterDelay

placement

<HvTooltip 
  enterDelay={300}
  placement="top"
  title="Tooltip text"
>
  <No Display Name variant="primarySubtle">
    Hover or focus here
  </No Display Name>
</HvTooltip>

<HvTooltip 
  enterDelay={300}
  placement="top"
  title="Tooltip text"
>
  <No Display Name variant="primarySubtle">
    Hover or focus here
  </No Display Name>
</HvTooltip>

HvTooltip uses Material UI’s tooltip under the hood. You can find more information about the component in their documentation.

If you’re looking for a tooltip on overflowing content, check out the HvOverflowTooltip component.

Disabled

To hide a Tooltip, remove its title.
Use disableFocusListener or disableHoverListener to disable showing it on focus or hover, respectively.

<div className="w-full flex justify-around pt-xl">
  <HvTooltip placement="right" title="">
    <HvButton variant="secondaryGhost">No tooltip</HvButton>
  </HvTooltip>
  <HvTooltip disableFocusListener title="Focusing the button will not open me">
    <HvButton variant="secondaryGhost">Focus ignored</HvButton>
  </HvTooltip>
  <HvTooltip disableHoverListener title="Hovering the button will not open me">
    <HvButton variant="secondaryGhost">Hover ignored</HvButton>
  </HvTooltip>
</div>

<div className="w-full flex justify-around pt-xl">
  <HvTooltip placement="right" title="">
    <HvButton variant="secondaryGhost">No tooltip</HvButton>
  </HvTooltip>
  <HvTooltip disableFocusListener title="Focusing the button will not open me">
    <HvButton variant="secondaryGhost">Focus ignored</HvButton>
  </HvTooltip>
  <HvTooltip disableHoverListener title="Hovering the button will not open me">
    <HvButton variant="secondaryGhost">Hover ignored</HvButton>
  </HvTooltip>
</div>

Custom elements

A Tooltip can be placed on any side of an element using the placement prop.
It requires the target component to hold a ref and spread its props—if not, wrap it in a <div> as a workaround.

UI Kit

<div className="w-full flex justify-around pt-xl">
  <HvTooltip
    placement="right"
    title="Tooltips can showcase truncated text. The text should be concise and not
        redundant."
  >
    <HvButton>Button</HvButton>
  </HvTooltip>
  <HvTooltip placement="bottom" title="Bottom placement">
    <HvButton icon>
      <Play />
    </HvButton>
  </HvTooltip>
  <HvTooltip title="Wrapped HvAvatar">
    <HvAvatar
      role="img"
      alt="Ryan"
      src="https://avatars.githubusercontent.com/u/80?v=4"
    />
  </HvTooltip>
  <HvTooltip placement="left" title="Left placement link">
    <HvTypography
      link
      component="a"
      href="https://github.com/lumada-design/hv-uikit-react"
    >
      UI Kit
    </HvTypography>
  </HvTooltip>
</div>

<div className="w-full flex justify-around pt-xl">
  <HvTooltip
    placement="right"
    title="Tooltips can showcase truncated text. The text should be concise and not
        redundant."
  >
    <HvButton>Button</HvButton>
  </HvTooltip>
  <HvTooltip placement="bottom" title="Bottom placement">
    <HvButton icon>
      <Play />
    </HvButton>
  </HvTooltip>
  <HvTooltip title="Wrapped HvAvatar">
    <HvAvatar
      role="img"
      alt="Ryan"
      src="https://avatars.githubusercontent.com/u/80?v=4"
    />
  </HvTooltip>
  <HvTooltip placement="left" title="Left placement link">
    <HvTypography
      link
      component="a"
      href="https://github.com/lumada-design/hv-uikit-react"
    >
      UI Kit
    </HvTypography>
  </HvTooltip>
</div>

Custom content

A Tooltip grows to fit its content.
Since it labels the target element and isn’t keyboard-navigable, avoid complex or interactive content in the tooltip.

<div className="w-full flex justify-around pt-xl">
  <HvTooltip
    title={
      <span className="max-w-250px">
        Tooltips can showcase truncated text. The text should be concise and not
        redundant.
      </span>
    }
  >
    <HvButton variant="secondaryGhost">Long text tooltip</HvButton>
  </HvTooltip>
  <HvTooltip
    title={
      <div className={"flex flex-col gap-xs"}>
        <HvTypography variant="label">January</HvTypography>
        <div className="border-b-3px border-atmo2 m-xs -mx-sm" />
        {[
          ["Sales", "52,000 units"],
          ["Profit", "50%"],
        ].map(([name, value]) => (
          <div key={name} className={"flex justify-between g-xs"}>
            <HvTypography variant="label">{name}</HvTypography>
            <HvTypography>{value}</HvTypography>
          </div>
        ))}
      </div>
    }
  >
    <HvButton variant="secondaryGhost">Multiline content</HvButton>
  </HvTooltip>
</div>

<div className="w-full flex justify-around pt-xl">
  <HvTooltip
    title={
      <span className="max-w-250px">
        Tooltips can showcase truncated text. The text should be concise and not
        redundant.
      </span>
    }
  >
    <HvButton variant="secondaryGhost">Long text tooltip</HvButton>
  </HvTooltip>
  <HvTooltip
    title={
      <div className={"flex flex-col gap-xs"}>
        <HvTypography variant="label">January</HvTypography>
        <div className="border-b-3px border-atmo2 m-xs -mx-sm" />
        {[
          ["Sales", "52,000 units"],
          ["Profit", "50%"],
        ].map(([name, value]) => (
          <div key={name} className={"flex justify-between g-xs"}>
            <HvTypography variant="label">{name}</HvTypography>
            <HvTypography>{value}</HvTypography>
          </div>
        ))}
      </div>
    }
  >
    <HvButton variant="secondaryGhost">Multiline content</HvButton>
  </HvTooltip>
</div>

HvOverflowTooltip

Toggle Button Tree View

Tooltip

Disabled

Custom elements

Custom content

Related components