当您希望为应用中某个特定区域提供更多用户信息时,可以使用 QTooltip 组件。当鼠标悬停在目标元素上(或在移动平台上短暂触摸并按住)时,工具提示将显示。
用法
QTooltip 的理念是将其作为直接子元素放置在您希望作为触发器的 DOM 元素/组件内部。不要担心 QTooltip 内容继承容器的 CSS,因为 QTooltip 将作为 <body>
的直接子元素通过 Quasar Portal 注入。
警告
如果要根据条件激活或停用 QTooltip,请使用 v-if
而不是 v-show
。
自定义
过渡
下面的示例展示了一些过渡。有关可用过渡的完整列表,请访问 过渡。
可重用
下面的示例展示了如何创建一个可重用的菜单,该菜单可以与不同的目标共享。
定位
QTooltip 的位置可以自定义。它会考虑 anchor
和 self
可选属性。QTooltip 弹出窗口的最终位置是计算出来的,以便它会显示在可用的屏幕空间上,并在必要时切换到右侧和/或顶部。
对于水平定位,当您希望自动考虑是否为 RTL 或非 RTL 时,可以使用 start
和 end
。 start
和 end
分别表示非 RTL 的“左”和 RTL 的“右”。
锚点原点
垂直
顶部
中间
底部
水平
左边
中间
右边
开始
结束
自身原点
垂直
顶部
中间
底部
水平
左边
中间
右边
开始
结束
<q-tooltip anchor="bottom middle" self="top middle">
Here I am!
</q-tooltip>
content_paste