为什么捐赠
API 资源管理器
工具提示

当您希望为应用中某个特定区域提供更多用户信息时,可以使用 QTooltip 组件。当鼠标悬停在目标元素上(或在移动平台上短暂触摸并按住)时,工具提示将显示。

正在加载 QTooltip API...

用法

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

基本



通过 v-model 切换



警告

如果要根据条件激活或停用 QTooltip,请使用 v-if 而不是 v-show

自定义

自定义



自定义延迟(1 秒)



带偏移量



过渡

下面的示例展示了一些过渡。有关可用过渡的完整列表,请访问 过渡

自定义过渡



可重用

下面的示例展示了如何创建一个可重用的菜单,该菜单可以与不同的目标共享。

使用目标



定位

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

对于水平定位,当您希望自动考虑是否为 RTL 或非 RTL 时,可以使用 startendstartend 分别表示非 RTL 的“左”和 RTL 的“右”。


锚点原点
垂直
水平
自身原点
垂直
水平

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