提示框

当您想向用户提供有关应用程序中特定区域的更多信息时,将使用QTooltip组件。 将鼠标悬停在目标元素上(或在移动平台上快速点击)时,将显示提示框。

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

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

Basic
Toggle through v-model

自定义

Customize
Custom delay (1 second)
With offset

过渡

在下面的示例中,展示了一些过渡。 有关可用过渡的完整列表,请转到过渡

Custom transition

可重用

下面的示例显示了如何创建可与不同目标共享的可重复使用的提示框。

Using target

定位

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

Anchor Origin
Vertical
Horizontal
Self Origin
Vertical
Horizontal
<q-tooltip anchor="bottom middle" self="top middle">
  Here I am!
</q-tooltip>

QTooltip API

Loading API...
Please wait...