Tooltip | UI components

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.

import { Button, Tooltip } from "@hubspot/ui-extensions";

function ToolTipExample() {
  return <Button overlay={<Tooltip>This is a tooltip</Tooltip>}>Hover me</Button>;
}

Props

Prop	Type	Description
`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>}
/>;

<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>;

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

​Props

​Placement

​Related components

Props

Placement

Related components