Last modified: August 22, 2025
The Tooltip component renders a tooltip when hovering over other UI components to provide users with additional context. This component can be inserted via the overlay prop in Button, Image, Link, LoadingButton, and Tag components.
Example of the Tooltip component
import { Button, Tooltip } from '@hubspot/ui-extensions';

function ToolTipExample() {
  return (
    <Button overlay={<Tooltip>This is a tooltip</Tooltip>}>Hover me</Button>
  );
}
PropTypeDescription
placement'top' (default) | 'bottom' | 'left' | 'right'The position where the tooltip will be displayed, relative to the parent UI component.

​
Placement

Using the placement prop, you can set where the tooltip will appear relative to the parent UI component (default is top). Below is an example of each placement value.
An example tooltip on an Image component
<Image
  src="https://cdn2.hubspot.net/hubfs/53/image8-2.jpg"
  alt="HubSpot example image"
  width="200px"
  overlay={<Tooltip placement="bottom">Tooltip on an Image component</Tooltip>}
/>

An example tooltip on a Link component
<Link
  href="https://developers.hubspot.com"
  overlay={
    <Tooltip placement="bottom">
      This is a tooltip <Link href="">with a link in it</Link>
    </Tooltip>
  }
>
  Hover this link
</Link>

An example tooltip on a LoadingButton component
<LoadingButton
  overlay={<Tooltip placement="left">Tooltip on a LoadingButton</Tooltip>}
  variant="primary"
>
  Hover loading button
</LoadingButton>

An example tooltip on a Tag component
<Tag
  overlay={<Tooltip placement="right">Tooltip on a Tag component</Tooltip>}
  format={{ variant: 'success' }}
>
  Hover this tag
</Tag>