---
name: Tooltip 文字提示
route: /guide/tooltip
menu: other
---

import JsxParser from "react-jsx-parser";
import {
  MessageBox,
  InlineCode,
  Example,
  Code,
  PropsTable
} from "theme";
import { Tooltip } from "shineDev";
import code from "./demo";
import "./demo/index.scss";

# Tooltip 文字提示

## 概述

用于在视觉上分隔两个独立的区域。

## 代码示例

<MessageBox messageType="info">
  为了让用户直观地查看代码演示，我们加入了{" "}
  <InlineCode>shine-tooltip-helper</InlineCode>{" "}
  修饰符，在开发过程中无需配置该字段。
</MessageBox>

#### 基础示例

文字提示组件支持嵌套在任何元素的外部，包括文本内容 / React 组件 / DOM 元素等。

<Example 
  display={<JsxParser {...code.basic} />}
  code={{code:code.basic.jsx}}
  components={code.basic.components}
/>

#### 弹出方向

通常情况下，文字提示会通过计算，自动判断弹出方向，也可以显式设置弹出方向。

<Example 
  display={<JsxParser {...code.direction} />}
  code={{code:code.direction.jsx}}
  components={code.direction.components}
/>

#### 渲染HTML

为了个性化文字提示，我们支持定制弹出渲染 HTML，该属性需要考察 XSS 的安全性问题。

<Example 
  display={<JsxParser {...code.html} />}
  code={{code:code.html.jsx}}
  components={code.html.components}
/>

#### 背景颜色

支持设置文字提示的弹出框背景颜色，目前支持 Dark / Light / Brand。

<Example 
  display={<JsxParser {...code.bgColor} />}
  code={{code:code.bgColor.jsx}}
  components={code.bgColor.components}
/>

## 配置参数

<PropsTable of={Tooltip} />