> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

# Tooltip

> Learn how to add interactive tooltips to your documentation. Display contextual information on hover for text and code elements.

The `<Tooltip>` component displays additional information when users hover over text or code elements. Use tooltips to provide context, definitions, or explanations without cluttering your documentation.

## Usage

Documentation becomes more interactive when you add

tooltips

to key terms.

**`Markdown`**

```tsx Markdown
Documentation becomes more interactive when you add <Tooltip tip="A simple tooltip for basic explanations">tooltips</Tooltip> to key terms. 
```

## Variants

### Rich content

You can include

rich content

with custom positioning for more detailed explanations

**`Markdown`**

```tsx Markdown
You can include <Tooltip 
  tip={
    <div>
      <strong>Rich Content</strong>
      <br /><br />
      Supports HTML formatting, <a href="https://buildwithfern.com/" target="_blank">external links</a>, and <code>inline code</code>
    </div>
  } 
  side="right"
>rich content</Tooltip> with custom positioning for more detailed explanations.
```

### Code tooltips

The code tooltip component allows you to provide contextual information for variables and values within your code examples. When users hover over highlighted code, they can see explanations, documentation links, or additional context without leaving the code example.

```ts
const apiKey = "{{API_KEY}}";
```

**`Markdown`**

````tsx Markdown
<Template
	data={{ API_KEY: "123456" }}
	tooltips={{
		API_KEY: (
			<p>
				Your API key is used to authenticate requests to our API. Keep this secure and never expose it in client-side code. 
			</p>
		)
	}}
>

```ts
const apiKey = "{{API_KEY}}";
```

</Template>
````

### Multiple code tooltips

```ts
// Import required libraries
import axios from "axios";

// Configure API client with authentication
const api = axios.create({
	baseURL: "{{BASE_URL}}",
	headers: {
	Authorization: `Bearer {{API_KEY}}`,
	"Content-Type": "application/json",
	},
});
```

**`Markdown`**

````tsx Markdown
<Template
	data={{ API_KEY: "example-key-test-123456789",
			BASE_URL: "https://api.example.com/v1",
	}}
	tooltips={{
		API_KEY: (<p>
		Your API key is used to authenticate requests to our API. Keep this secure and never expose it in client-side code.
		<br /><br />
		You can find your API keys in the <a href="https://dashboard.example.com/settings/api-keys">Dashboard</a>
		<br /><br />
		<strong>Note:</strong> Keys prefixed with <code>example-key-test-</code> are for testing, while keys with <code>example-key-live-</code> are for production.
		</p>),
		BASE_URL: (<p>
		The base URL for all API requests. Different environments (test/production) use different base URLs.
		<br /><br />
		See our <a href="https://docs.example.com/environments">Environments documentation</a> for more details.
		</p>),
	}}
>

```ts
// Import required libraries
import axios from "axios";

// Configure API client with authentication
const api = axios.create({
	baseURL: "{{BASE_URL}}",
	headers: {
	Authorization: `Bearer {{API_KEY}}`,
	"Content-Type": "application/json",
},
});
```

</Template>
````

## Properties

### Text tooltip properties

**`tip`** `string | ReactNode` — required

The content to display in the tooltip. Can be a simple string or React component for more complex content.

---

**`side`** `'top' | 'right' | 'bottom' | 'left'` — default: top

Controls which side of the element the tooltip appears on.

---

**`sideOffset`** `number`

The distance between the tooltip and the trigger element (px).

---

### Code tooltip properties

**`data`** `object` — required

Key-value pairs where the values are displayed in your code blocks.

---

**`tooltips`** `object`

Key-value pairs where the values are displayed in the tooltips. The Key for `tooltips` must match the Key for `data`.

---

#### Custom styling

### Style a code tooltip

To customize code tooltips, target the `.fern-mdx-tooltip-content` selector. You can override CSS variables or add any custom styles:

```css
.fern-mdx-tooltip-content {
  --tooltip-padding-x: 1.5rem; /* Horizontal padding inside tooltip */
  /* Add custom styles here */
}
```

### Style a text tooltip

To customize text tooltips, target the `.fern-mdx-tooltip-trigger` selector. You can override CSS variables for common customizations or add any custom styles:

```css
.fern-mdx-tooltip-trigger {
  --tooltip-underline-color: blue; /* Color of the underline in default state */
  --tooltip-underline-hover-color: green; /* Color of the underline on hover */
  --tooltip-underline-thickness: 2px; /* Thickness of the underline */
  --tooltip-underline-offset: 2px; /* Distance between text and underline */
  --tooltip-transition-duration: 0.10s; /* Hover transition speed */
  /* Add custom styles here */
}
```

> Learn how to add interactive tooltips to your documentation. Display contextual information on hover for text and code elements.