为什么捐赠
API 浏览器
联系站长
悬浮提示

QTooltip 组件用于向用户提供有关应用程序中某个区域的更多信息。当鼠标悬停在目标元素上时(或者在移动平台上快速点击并保持) ,工具提示就会出现。

正在加载 QTooltip API...

用法

QTooltip 的理念是将其作为直接子元素放置在您希望作为触发器的 DOM 元素/组件内部。不用担心 QTooltip 内容从容器继承 CSS,因为 QTooltip 将通过 Quasar Portal 被注入为 <body> 的直接子级。

基础



通过 v-model 切换



WARNING

如果您想要有条件地激活或停用 QTooltip,请使用 v-if 而不是 v-show

自定义

自定义



自定义延时 (1 秒)



带偏移



过渡效果

下面的示例展示了几种过渡效果。有关可用过渡效果的完整列表,请参阅过渡效果

自定义过渡效果



可复用的

下面的例子展示了如何创建可以与不同目标共享的可复用的菜单。

使用 target 属性



定位

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

关于水平方向上的定位,如果您希望其自动适应 RTL 或 non-RTL,您可以使用 startendstartend 在 non-RTL 中表示"左",在 RTL 中表示"右"。


Anchor Origin
Vertical
Horizontal
Self Origin
Vertical
Horizontal

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