API 浏览器
工具提示

当你想向用户提供有关应用中某个区域的更多信息时,可以使用 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.

Loading QTooltip API...

用法(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.

Basic



Toggle through v-model



警告

如果你想有条件地激活或停用 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

Customize



Custom delay (1 second)



With offset



过渡效果(Transitions)

¥Transitions

在下面的例子中,展示了一些过渡效果。要查看可用的转换的完整列表,请前往 过渡效果

¥In the example below there’s a few transitions showcased. For a full list of transitions available, go to Transitions.

Custom transition



可重用(Reusable)

¥Reusable

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

¥The example below shows how to create a re-usable menu that can be shared with different targets.

Using target



定位(Positioning)

¥Positioning

QTooltip 的位置可以自定义。它记录了 anchorself 可选属性。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 时,可以使用 startendstartend 表示非 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.


Anchor Origin
Vertical
Horizontal
Self Origin
Vertical
Horizontal

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