Tooltip 文字提示

使用场景

简单的文字提示气泡框。

鼠标移入则显示提示，移出消失，文字提示不承载复杂文本和操作。可用来代替系统默认的 title 提示，提供一个 按钮/文字/操作 的文案解释。

// 默认写法:

<span title="文案解释，文案解释">被解释的文本</span>

// 使用 Tooltip 进行优化:

<Tooltip title="文案解释，文案解释">被解释的文本</Tooltip>

示例

基本示例

鼠标悬停查看详情

inline

function Example() { return ( <Tooltip title={ <> 最近工作：高级经理｜招商银行丨杭州分行｜2009-07-01 至今 <br /> 工作职责：巴拉巴拉小魔仙 <br /> 联系方式：67676767｜1212121@163.con </> } > <span style={{ border: '1px solid currentColor', padding: 4, cursor: 'default' }}>鼠标悬停查看详情</span> </Tooltip> ); }

function Example() {
  return (
    <Tooltip
      title={
        <>
          最近工作：高级经理｜招商银行丨杭州分行｜2009-07-01 至今
          <br />
          工作职责：巴拉巴拉小魔仙
          <br />
          联系方式：67676767｜1212121@163.con
        </>
      }
    >
      <span style={{ border: '1px solid currentColor', padding: 4, cursor: 'default' }}>鼠标悬停查看详情</span>
    </Tooltip>
  );
}

弹出方向

使用 placement 设置文字提示的弹出方向。

API

字段	描述
title	ReactNode 提示内容
children	ReactNode 正文内容
visible	boolean 是否显示弹层
onRequestClose	(reason: any) => void 弹层请求关闭时触发事件的回调函数
attachOverlayManager	boolean
renderTarget	(htmlProps, partialPopupProps) => React.ReactNode 渲染目标元素的自定义方法。 该属性将覆盖 target/targetTagName/targetStyle
onRequestOpen	(reason: any) => void 弹层请求打开时触发事件的回调函数
placement	Placement = top 弹层方向
flip	boolean 弹层翻转 是否允许弹层翻转
浮层容器
usePortal	boolean 是否使用 portal 来渲染弹层内容
浮层交互
interactionKind	PopupInteractionKind = hover 触发弹层显示或隐藏的操作类型，可以是 click', 'hover', 'hover-target'
浮层生命周期
beforeOpen	(state?: any) => Promise<IOverlayAnimationProps> 浮层即将被打开时的回调
onOpen	() => void 浮层打开时的回调
afterOpen	() => void 浮层打开时的回调
beforeClose	() => IOverlayAnimationProps 浮层即将被关闭时的回调
onClose	() => void 浮层关闭时的回调
afterClose	() => void 浮层关闭后的回调