> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 1847c5ba-176a-432c-a7f5-d92ee51020e0
---

# Tooltip | UI components

> Learn about the Tooltip component for use in UI extensions.

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](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/button), [Image](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/image), [Link](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/link), [LoadingButton](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/loading-button), and [Tag](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/tag) components.

<div style={{ maxWidth: '380px', margin: '0 auto' }}>
  <Frame>
    <img src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/ui-extensions/uie-tooltip-component-button-hover-example.png" alt="Example of the Tooltip component" />
  </Frame>
</div>

```jsx theme={null}
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.

<div style={{ maxWidth: '390px', margin: '0 auto' }}>
  <Frame>
    <img
      src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/ui-extensions/uie-tooltip-component-image-example.png"
      alt="An example tooltip on an Image
component"
    />
  </Frame>
</div>

```jsx theme={null}
<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>}
/>;
```

<br />

<div style={{ maxWidth: '280px', margin: '0 auto' }}>
  <Frame>
    <img src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/ui-extensions/uie-tooltip-component-link-bottom-example.png" alt="An example tooltip on a Link component" />
  </Frame>
</div>

```jsx theme={null}
<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>;
```

<br />

<div style={{ maxWidth: '380px', margin: '0 auto' }}>
  <Frame>
    <img src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/ui-extensions/uie-tooltip-component-loadingbutton-example.png" alt="An example tooltip on a LoadingButton component" />
  </Frame>
</div>

```jsx theme={null}
<LoadingButton overlay={<Tooltip placement="left">Tooltip on a LoadingButton</Tooltip>} variant="primary">
  Hover loading button
</LoadingButton>;
```

<br />

<div style={{ maxWidth: '300px', margin: '0 auto' }}>
  <Frame>
    <img src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/ui-extensions/uie-tooltip-component-tag-example.png" alt="An example tooltip on a Tag component" />
  </Frame>
</div>

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

## Related components

* [Panel](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/panel)
* [Modal](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/modal)
* [Icon](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/icon)