# 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

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

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

<div>
  <div>
    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
  </div>
</div>

```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.

<div>
  <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>
</div>

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

<div>
  <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>
</div>

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

<ParamField path="tip" type="string | ReactNode" required={true}>
  The content to display in the tooltip. Can be a simple string or React component for more complex content.
</ParamField>

<ParamField path="side" type="'top' | 'right' | 'bottom' | 'left'" required={false} default="top">
  Controls which side of the element the tooltip appears on.
</ParamField>

<ParamField path="sideOffset" type="number" required={false} default={4}>
  The distance between the tooltip and the trigger element (px).
</ParamField>

### Code tooltip properties

<ParamField path="data" type="object" required={true}>
  Key-value pairs where the values are displayed in your code blocks.
</ParamField>

<ParamField path="tooltips" type="object" required={false}>
  Key-value pairs where the values are displayed in the tooltips. The Key for `tooltips` must match the Key for `data`.
</ParamField>

<Accordion title="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 */
  }
  ```
</Accordion>