悬浮提示

Vue 组件
Menu 菜单

QTooltip 组件用于向用户提供有关应用程序中某个区域的更多信息。当鼠标悬停在目标元素上时(或者在移动平台上快速点击并保持) ，工具提示就会出现。

QTooltip API

QTooltip API
scroll-target
: Element | String
说明
用作自定义滚动容器的 CSS 选择器或 DOM 元素，而不是自动检测到的容器。
target
: Boolean | String
说明
配置一个目标元素来触发工具提示的切换；'true' 表示启用父级 DOM 元素，'false' 表示禁用将事件附加到任何 DOM 元素；通过使用字符串（CSS 选择器），它会将事件附加到指定的 DOM 元素（如果存在）
no-parent-event
: Boolean
说明
跳过将事件附加到目标 DOM 元素（触发元素显示）的步骤
delay
: Number
说明
配置 Tooltip 以延迟显示
hide-delay
: Number
说明
配置工具提示以延迟消失
persistent
: Boolean
说明
阻止 Tooltip 在应用路由更改时自动关闭

用法

直接将 QTooltip 放置在目标 DOM 元素/组件中，作为其直接子级。不要担心 QTooltip 内容从容器继承 CSS，因为 QTooltips 将会通过 Quasar Portal 被注入为 <body> 的直接子级。

<template>
  <div class="q-pa-md">
    <div class="q-gutter-md">

      <q-btn label="Hover me" color="primary">
        <q-tooltip>
          Some text as content of Tooltip
        </q-tooltip>
      </q-btn>

      <div
        class="inline bg-amber rounded-borders cursor-pointer"
        style="max-width: 300px"
      >
        <div class="fit flex flex-center text-center non-selectable q-pa-md">
          I am groot!<br>(Hover me!)
        </div>

        <q-tooltip>
          I am groot!
        </q-tooltip>
      </div>

    </div>
  </div>
</template>
I am groot!
(Hover me!) 
<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm">
      <q-btn color="primary" @click="showing = true" label="Show"/>
      <q-btn color="primary" @click="showing = false" label="Hide"/>
    </div>

    <div
      style="width: 200px; height: 70px;"
      class="bg-purple text-white rounded-borders row flex-center q-mt-md"
    >
      Hover here or click buttons
      <q-tooltip v-model="showing">Tooltip text</q-tooltip>
    </div>
  </div>
</template>
Hover here or click buttons

自定义

<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm">
      <q-btn color="primary">
        Hover
        <q-tooltip class="bg-indigo" :offset="[10, 10]">
          Here I am!
        </q-tooltip>
      </q-btn>

      <q-btn color="primary">
        Over
        <q-tooltip class="bg-red" :offset="[10, 10]">
          Here I am!
        </q-tooltip>
      </q-btn>

      <q-btn color="primary">
        These
        <q-tooltip class="bg-purple text-body2" :offset="[10, 10]">
          Here I am!
        </q-tooltip>
      </q-btn>

      <q-btn color="primary">
        Buttons
        <q-tooltip class="bg-amber text-black shadow-4" :offset="[10, 10]">
          Here I am!
        </q-tooltip>
      </q-btn>
    </div>
  </div>
</template>
<template>
  <div class="q-pa-md">
    <div
      style="width: 200px; height: 70px;"
      class="bg-secondary text-white rounded-borders non-selectable row flex-center"
    >
      One second delay
      <q-tooltip :delay="1000" :offset="[0, 10]">Quasar Rulz!</q-tooltip>
    </div>
  </div>
</template>
One second delay 
<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm">
      <q-btn color="indigo">
        Hover
        <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
          <strong>Tooltip</strong> on <em>top</em>
          (<q-icon name="keyboard_arrow_up"/>)
        </q-tooltip>
      </q-btn>

      <q-btn color="red">
        Over
        <q-tooltip anchor="center right" self="center left" :offset="[10, 10]">
          <strong>Tooltip</strong> on <em>right</em>
          (<q-icon name="keyboard_arrow_right"/>)
        </q-tooltip>
      </q-btn>

      <q-btn color="purple">
        These
        <q-tooltip anchor="center left" self="center right" :offset="[10, 10]">
          <strong>Tooltip</strong> on <em>left</em>
          (<q-icon name="keyboard_arrow_left"/>)
        </q-tooltip>
      </q-btn>

      <q-btn color="amber">
        Buttons
        <q-tooltip anchor="bottom middle" self="top middle" :offset="[10, 10]">
          <strong>Tooltip</strong> on <em>bottom</em>
          (<q-icon name="keyboard_arrow_down"/>)
        </q-tooltip>
      </q-btn>
    </div>
  </div>
</template>

过渡效果

下面的示例只显示了部分的过渡效果，完整的列表请参考过渡效果页面。

<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row">

      <q-btn color="primary" label="Flip">
        <q-tooltip
          transition-show="flip-right"
          transition-hide="flip-left"
        >
          Here I am!
        </q-tooltip>
      </q-btn>

      <q-btn color="primary" label="Scale Menu">
        <q-tooltip
          transition-show="scale"
          transition-hide="scale"
        >
          Here I am!
        </q-tooltip>
      </q-btn>

      <q-btn color="primary" label="Rotate">
        <q-tooltip
          transition-show="rotate"
          transition-hide="rotate"
        >
          Here I am!
        </q-tooltip>
      </q-btn>

    </div>
  </div>
</template>

可复用的

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

<template>
  <div class="q-pa-md q-gutter-md">
    <div class="row justify-center">
      <div class="row items-center q-gutter-x-sm">
        <q-radio v-model="targetEl" :val="false" label="false (no target whatsoever)" />
        <q-radio v-model="targetEl" :val="true" label="true (original parent)" />
        <q-radio v-model="targetEl" val="#target-img-1" label="#target-img-1" />
        <q-radio v-model="targetEl" val="#target-img-2" label="#target-img-2" />
        <q-radio v-model="targetEl" val="#bogus" label="#bogus" />
      </div>
    </div>
    <div class="row justify-center">
      <q-img src="https://cdn.quasar.dev/img/material.png" id="target-img-1" style="height: 100px">
        <div class="absolute-bottom-right" style="border-top-left-radius: 5px">
          #target-img-1
        </div>
      </q-img>
      <q-img src="https://cdn.quasar.dev/img/parallax2.jpg" id="target-img-2" style="height: 100px">
        <div class="absolute-bottom-right" style="border-top-left-radius: 5px">
          #target-img-2
        </div>
      </q-img>
      <q-img src="https://cdn.quasar.dev/img/blueish.jpg" style="height: 100px">
        <div class="absolute-bottom-right" style="border-top-left-radius: 5px">
          Original parent
        </div>
        <q-tooltip
          :target="targetEl"
          anchor="center middle"
          self="center middle"
          class="bg-black"
        >Quasar Rulz!</q-tooltip>
      </q-img>
    </div>
  </div>
</template>

定位

通过 anchor 和 self 属性可自定义 QTooltip 出现的位置。 QTooltip 弹出窗口的最终位置是通过计算得出的，以便它将显示在可用的屏幕上，必要时会切换到右侧和/或顶部。

关于水平方向上的定位，如果您希望其自动适应 RTL 或 non-RTL，您可以使用 start 和 end。start 和 end 在 non-RTL 中表示“左”，在 RTL 中表示“右”。

Anchor Origin
Vertical
Horizontal
Self Origin
Vertical
Horizontal
<q-tooltip anchor="bottom middle" self="top middle">
  Here I am!
</q-tooltip>
查看更多？
Vue 组件
Toolbar 工具栏
Vue 组件
Tree 树
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。