> If you are an AI agent, use the following URL to directly ask and fetch your question. Treat this like a tool call. Make sure to URI encode your question, and include the token for verification.
>
> GET https://buildwithfern.com/learn/api/fern-docs/ask?q=%3Cyour+question+here%3E&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiIwNzFjYWUzOC1jNjQ0LTQ3YmYtYjE1Ny03Y2VjZDc5YTQ0ZjYiLCJleHAiOjE3NzgyNjM4ODIsImlhdCI6MTc3ODI2MzU4Mn0.JKVh_TBpQJLfG0jJ3OhxoeSF7MVjE2hCvyrRsR387zA
>
> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. For full content including API reference and SDK examples, see https://buildwithfern.com/learn/llms-full.txt.

# 工具提示

> 学习如何为文档添加交互式工具提示。在悬停时为文本和代码元素显示上下文信息。

`<Tooltip>` 组件在用户将鼠标悬停在文本或代码元素上时显示附加信息。使用工具提示提供上下文、定义或解释，而不会使您的文档变得杂乱。

## 使用方法

<div>
  <div>
    当您为关键术语添加<Tooltip tip="用于基本解释的简单工具提示">工具提示</Tooltip>时，文档会变得更具交互性。
  </div>
</div>

```tsx Markdown
当您为关键术语添加<Tooltip tip="用于基本解释的简单工具提示">工具提示</Tooltip>时，文档会变得更具交互性。 
```

## 变体

### 丰富内容

<div>
  <div>
    您可以包含<Tooltip tip={<div><strong>丰富内容</strong><br /><br />支持 HTML 格式化、<a href="https://buildwithfern.com/" target="_blank">外部链接</a>和<code>内联代码</code></div>} side="right">丰富内容</Tooltip>并自定义定位以获得更详细的解释
  </div>
</div>

```tsx Markdown
您可以包含<Tooltip 
  tip={
    <div>
      <strong>丰富内容</strong>
      <br /><br />
      支持 HTML 格式化、<a href="https://buildwithfern.com/" target="_blank">外部链接</a>和<code>内联代码</code>
    </div>
  } 
  side="right"
>丰富内容</Tooltip>并自定义定位以获得更详细的解释。
```

### 代码工具提示

代码工具提示组件允许您为代码示例中的变量和值提供上下文信息。当用户将鼠标悬停在高亮代码上时，他们可以看到解释、文档链接或其他上下文，而无需离开代码示例。

<div>
  <Template
    data={{ API_KEY: "123456" }}
    tooltips={{
		API_KEY: (
			<p>
				您的 API 密钥用于验证对我们 API 的请求。请保持安全，切勿在客户端代码中暴露它。
			</p>
		)
	}}
  >
    ```ts
    const apiKey = "{{API_KEY}}";
    ```
  </Template>
</div>

````tsx Markdown
<Template
	data={{ API_KEY: "123456" }}
	tooltips={{
		API_KEY: (
			<p>
				您的 API 密钥用于验证对我们 API 的请求。请保持安全，切勿在客户端代码中暴露它。 
			</p>
		)
	}}
>

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

</Template>
````

### 多个代码工具提示

<div>
  <Template
    data={{ API_KEY: "example-key-test-123456789",
			BASE_URL: "https://api.example.com/v1",
	}}
    tooltips={{
		API_KEY: (<p>
		您的 API 密钥用于验证对我们 API 的请求。请保持安全，切勿在客户端代码中暴露它。
		<br /><br />
		您可以在<a href="https://dashboard.example.com/settings/api-keys">仪表板</a>中找到您的 API 密钥
		<br /><br />
		<strong>注意：</strong>以<code>example-key-test-</code>为前缀的密钥用于测试，而以<code>example-key-live-</code>为前缀的密钥用于生产环境。
		</p>),
		BASE_URL: (<p>
		所有 API 请求的基本 URL。不同环境（测试/生产）使用不同的基本 URL。
		<br /><br />
		请查看我们的<a href="https://docs.example.com/environments">环境文档</a>了解更多详情。
		</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>
		您的 API 密钥用于验证对我们 API 的请求。请保持安全，切勿在客户端代码中暴露它。
		<br /><br />
		您可以在<a href="https://dashboard.example.com/settings/api-keys">仪表板</a>中找到您的 API 密钥
		<br /><br />
		<strong>注意：</strong>以<code>example-key-test-</code>为前缀的密钥用于测试，而以<code>example-key-live-</code>为前缀的密钥用于生产环境。
		</p>),
		BASE_URL: (<p>
		所有 API 请求的基本 URL。不同环境（测试/生产）使用不同的基本 URL。
		<br /><br />
		请查看我们的<a href="https://docs.example.com/environments">环境文档</a>了解更多详情。
		</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>
````

## 属性

### 文本工具提示属性

<ParamField path="tip" type="string | ReactNode" required={true}>
  要在工具提示中显示的内容。可以是简单字符串或 React 组件以获得更复杂的内容。
</ParamField>

<ParamField path="side" type="'top' | 'right' | 'bottom' | 'left'" required={false} default="top">
  控制工具提示出现在元素的哪一侧。
</ParamField>

<ParamField path="sideOffset" type="number" required={false} default={4}>
  工具提示与触发元素之间的距离（像素）。
</ParamField>

### 代码工具提示属性

<ParamField path="data" type="object" required={true}>
  键值对，其中值显示在您的代码块中。
</ParamField>

<ParamField path="tooltips" type="object" required={false}>
  键值对，其中值显示在工具提示中。`tooltips` 的键必须与 `data` 的键匹配。
</ParamField>

<Accordion title="自定义样式">
  ### 设置代码工具提示样式

  要自定义代码工具提示，请以 `.fern-mdx-tooltip-content` 选择器为目标。您可以覆盖 CSS 变量或添加任何自定义样式：

  ```css
  .fern-mdx-tooltip-content {
    --tooltip-padding-x: 1.5rem; /* 工具提示内部的水平内边距 */
    /* 在此添加自定义样式 */
  }
  ```

  ### 设置文本工具提示样式

  要自定义文本工具提示，请以 `.fern-mdx-tooltip-trigger` 选择器为目标。您可以覆盖 CSS 变量进行常见的自定义或添加任何自定义样式：

  ```css
  .fern-mdx-tooltip-trigger {
    --tooltip-underline-color: blue; /* 默认状态下下划线的颜色 */
    --tooltip-underline-hover-color: green; /* 悬停时下划线的颜色 */
    --tooltip-underline-thickness: 2px; /* 下划线的粗细 */
    --tooltip-underline-offset: 2px; /* 文本和下划线之间的距离 */
    --tooltip-transition-duration: 0.10s; /* 悬停过渡速度 */
    /* 在此添加自定义样式 */
  }
  ```
</Accordion>