提示框

当您想向用户提供有关应用程序中特定区域的更多信息时,将使用QTooltip组件。 将鼠标悬停在目标元素上(或在移动平台上快速点击)时,将显示提示框。

QTooltip API

用法

QTooltip的想法是将其放置在您希望成为触发器的DOM元素/组件中, 作为直接子元素。 不必担心QTooltip内容会从容器继承CSS,因为QTooltip将通过Quasar Portal作为<body>的直接子元素注入。







自定义










过渡

在下面的示例中,展示了一些过渡。 有关可用过渡的完整列表,请转到过渡




可重用

下面的示例显示了如何创建可与不同目标共享的可重复使用的提示框。




定位

QTooltip的位置可以自定义。 它有anchorself可选属性。 计算QTooltip弹出窗口的最终位置,以便将其显示在可用的屏幕空间上,并在必要时切换到右侧和/或顶部。

对于水平定位,您可以使用startend来自动考虑是在RTL上还是在非RTL上。startend表示非RTL的“left”,表示RTL的“right”。


Anchor Origin
Vertical
Horizontal
Self Origin
Vertical
Horizontal

<q-tooltip anchor="bottom middle" self="top middle">
  Here I am!
</q-tooltip>