组件
工具提示
工具提示是一个小的，浮动的内容块，通过悬停或聚焦在一个元素上触发。
工具提示主要用于补充内容，不应该妨碍关键任务。在大多数情况下，工具提示不应该包含交互式内容(如按钮或链接)。在这些情况下，使用Popout组件，点击时显示给用户，而不是通过悬停或聚焦。
从“@sproutsocial/racine”中导入爱游戏体育官网首页{工具提示}
工具提示可以有两种不同的外观:
药丸—小的圆形，用于短的单行文本盒子-矩形形状，用于多行文本和/或更复杂的内容，如图像和列表
有关如何在实践中使用工具提示的更多信息和示例，请查看覆盖部分我们的上下文消息传递模式。
属性
传递给工具提示组件将向下展开到工具提示内容上，并可用于调整浮动工具容器的样式。
| 名字 | 类型 | 默认的 | 描述 | 需要吗? |
|---|---|---|---|---|
孩子们 |
反应。节点 |
工具提示应该附加到的内容。悬停或聚焦此元素将导致工具提示出现 |
||
内容 |
反应。节点 |
在工具提示中显示的内容。如果没有内容，则只呈现子元素 |
||
放置 |
EnumPlacements |
“汽车” |
工具提示相对于子控件的位置 |
|
enterDelay |
数量 |
运动。* 1000 |
在工具提示出现之前，用户必须悬停/聚焦的时间(以毫秒为单位) |
|
外观 |
“药”
“盒子”
|
用于覆盖工具提示内容的外观。默认情况下，字符串将具有“药丸”外观，而更复杂的内容将具有“框”外观。您可以通过设置此属性来更改这些默认值。 |
||
质量保证 |
对象 |
|||
zIndex |
数量 |
7 |
||
popoutProps |
对象 |
Props要扩展到底层的Popout组件上 |
||
截断 |
布尔 |
假 |
将文本截断为带省略号的单行 |
食谱
带图像的工具提示
带有可聚焦内容的工具提示
建议不要在工具提示中包含交互式元素。劣质冲浪板更适合，因为它们是通过点击而不是悬停触发的。
如果您确实需要支持关注工具提示中的元素，则可以设置focusOnContent支撑真正的通过将其传递到底层Popout组件popoutProps：
alert('Clicked!')} width={1}>
Click me
}
popoutProps={{focusOnContent: true}}
>
" language="jsx" style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:monospace;color:#c8cccc">