Tooltip 文字提示
Tooltip 用一小段文字说明触发元素,鼠标悬停和键盘聚焦时显示(触屏上点一下显示)。它是反色的 Popover,带 role="tooltip",属性和 Popover 一样。
演示
基础用法
把提示放在它说明的那个元素上。只有图标的按钮靠提示来显示名字,但按钮本身仍要加 aria-label。
长文字和无箭头
长提示在 280px 处换行。showArrow={false} 去掉箭头。
和 Popover 放在同一个按钮上
提示和弹出信息可以共用一个触发元素:点击打开弹出信息,悬停仍然显示提示。
Props
Tooltip 接受 Popover 的全部属性,content 就是提示文字。区别只在外观:反色、更小、最大宽度 280px。其余属性和 ref 传给触发元素。
触发元素会带上指向提示的 aria-describedby,读屏软件会在读出元素名字之后读出提示。