当您想向用户提供有关应用程序中特定区域的更多信息时,将使用QTooltip组件。 将鼠标悬停在目标元素上(或在移动平台上快速点击)时,将显示提示框。
QTooltip API
用法
QTooltip的想法是将其放置在您希望成为触发器的DOM元素/组件中, 作为直接子元素。 不必担心QTooltip内容会从容器继承CSS,因为QTooltip将通过Quasar Portal作为<body>
的直接子元素注入。
自定义
过渡
在下面的示例中,展示了一些过渡。 有关可用过渡的完整列表,请转到过渡。
可重用
下面的示例显示了如何创建可与不同目标共享的可重复使用的提示框。
定位
QTooltip的位置可以自定义。 它有anchor
和self
可选属性。 计算QTooltip弹出窗口的最终位置,以便将其显示在可用的屏幕空间上,并在必要时切换到右侧和/或顶部。
对于水平定位,您可以使用start
和end
来自动考虑是在RTL上还是在非RTL上。start
和end
表示非RTL的“left”,表示RTL的“right”。
Anchor Origin
Vertical
Top
Center
Bottom
Horizontal
Left
Middle
Right
Start
End
Self Origin
Vertical
Top
Center
Bottom
Horizontal
Left
Middle
Right
Start
End
<q-tooltip anchor="bottom middle" self="top middle">
Here I am!
</q-tooltip>