跳到导航
编写内容组件

工具提示

以 Markdown 格式查看

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

使用方法

当您为关键术语添加工具提示时，文档会变得更具交互性。

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

变体

丰富内容

您可以包含丰富内容并自定义定位以获得更详细的解释

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

代码工具提示

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

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

多个代码工具提示

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

属性

文本工具提示属性

tip
string | ReactNodeRequired

要在工具提示中显示的内容。可以是简单字符串或 React 组件以获得更复杂的内容。

side
'top' | 'right' | 'bottom' | 'left'Defaults to top

控制工具提示出现在元素的哪一侧。

sideOffset
numberDefaults to 4

工具提示与触发元素之间的距离（像素）。

代码工具提示属性

data
objectRequired

键值对，其中值显示在您的代码块中。

tooltips
object

键值对，其中值显示在工具提示中。tooltips 的键必须与 data 的键匹配。

设置代码工具提示样式

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

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

设置文本工具提示样式

要自定义文本工具提示，请以 .fern-mdx-tooltip-trigger 选择器为目标。您可以覆盖 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; /* 悬停过渡速度 */
  /* 在此添加自定义样式 */
}