当你想向用户提供有关应用中某个区域的更多信息时,可以使用 QTooltip 组件。当鼠标悬停在目标元素上(或在移动平台上短暂触摸并按住)时,工具提示将会出现。
¥The QTooltip component is to be used when you want to offer the user more information about a certain area in your App. When hovering the mouse over the target element (or briefly touching and holding on mobile platforms), the tooltip will appear.
用法(Usage)
¥Usage
QTooltip 的思路是将其放置在你想要触发的 DOM 元素/组件中,作为直接子元素。不必担心 QTooltip 内容会从容器继承 CSS,因为 QTooltip 将通过 Quasar Portal 作为 <body>
的直接子项注入。
¥The idea with QTooltip is to place it inside your DOM element / component that you want to be the trigger as direct child. Don’t worry about QTooltip content inheriting CSS from the container as the QTooltip will be injected as a direct child of <body>
through a Quasar Portal.
警告
如果你想有条件地激活或停用 QTooltip,请使用 v-if
而不是 v-show
。
¥If you want to conditionally activate or de-activate a QTooltip, please use v-if
on it instead of v-show
.
自定义(Customize)
¥Customize
过渡效果(Transitions)
¥Transitions
在下面的例子中,展示了一些过渡效果。要查看可用的转换的完整列表,请前往 过渡效果。
¥In the example below there’s a few transitions showcased. For a full list of transitions available, go to Transitions.
可重用(Reusable)
¥Reusable
以下示例展示了如何创建可重复使用的菜单,并与不同目标共享。
¥The example below shows how to create a re-usable menu that can be shared with different targets.
定位(Positioning)
¥Positioning
QTooltip 的位置可以自定义。它记录了 anchor
和 self
可选属性。QTooltip 弹出窗口的最终位置经过计算,使其显示在可用的屏幕空间上,并在必要时切换到右侧和/或顶部。
¥The position of QTooltip can be customized. It keeps account of the anchor
and self
optional props. The final position of QTooltip popup is calculated so that it will be displayed on the available screen real estate, switching to the right-side and/or top-side when necessary.
对于水平定位,当你希望自动考虑是 RTL 还是非 RTL 时,可以使用 start
和 end
。start
和 end
表示非 RTL 的 “left” 和 RTL 的 “right”。
¥For horizontal positioning you can use start
and end
when you want to automatically take into account if on RTL or non-RTL. start
and end
mean “left” for non-RTL and “right” for RTL.
<q-tooltip anchor="bottom middle" self="top middle">
Here I am!
</q-tooltip>