跳到正文

Tooltip 文字提示

Tooltip 用一小段文字说明触发元素,鼠标悬停和键盘聚焦时显示(触屏上点一下显示)。它是反色的 Popover,带 role="tooltip",属性和 Popover 一样。

演示

基础用法

把提示放在它说明的那个元素上。只有图标的按钮靠提示来显示名字,但按钮本身仍要加 aria-label。

长文字和无箭头

长提示在 280px 处换行。showArrow={false} 去掉箭头。

和 Popover 放在同一个按钮上

提示和弹出信息可以共用一个触发元素:点击打开弹出信息,悬停仍然显示提示。

Props

Tooltip 接受 Popover 的全部属性,content 就是提示文字。区别只在外观:反色、更小、最大宽度 280px。其余属性和 ref 传给触发元素。

触发元素会带上指向提示的 aria-describedby,读屏软件会在读出元素名字之后读出提示。