Tooltip

Tooltips display informative text when users hover over, focus on, or tap an element. Accessibility-wise, the tooltip automatically labels the `children` content. If you are looking to wrap an icon only button with a tooltip, take a look at the `HvIconButton` component which offers you thus behavior out of the box.

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; disableFocusListener and disableHoverListener disable focus or hover, respectively.

<div className="w-full flex justify-around pt-10">
  <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-10">
  <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 attached to any side (see placement) of any element or component that holds a ref and spreads its props.
If the component doesn’t do so, a workaround is to wrap it in a div.

UI Kit

<div className="w-full flex justify-around pt-10">
  <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-10">
  <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 will grow to the size of its content. Keep in mind that the Tooltip title labels the content children
and is not keyboard-navigable, therefore it shouldn’t be too complex or contain interactable elements.

<div className="w-full flex justify-around pt-10">
  <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-[var(--uikit-colors-atmo2)] m-[xs] mx-[-16px]" />
        {[
          ["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-10">
  <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-[var(--uikit-colors-atmo2)] m-[xs] mx-[-16px]" />
        {[
          ["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

Time Picker

Tooltip

Disabled

Custom elements

Custom content

Related components