提示框(Tooltip)

当您想要向用户提供您应用中有关特定区域的更多信息时，应使用QTooltip。 将鼠标悬停在目标元素上（或在移动平台上快速点击）时，将出现工具提示。

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QTooltip']
}

基本用法

在下面的例子中，我们使用QBtn（作为目标），当悬停在它上面时，Quasar将显示一些文本。

您可以用您喜欢的任何DOM元素或组件替换QBtn和QPopover中的内容。

<!--
  目标按钮（可以是其他任何东西）
  必须是DOM层次结构上QPopover的直接父元素。
-->
<q-btn label="Email">
  <!-- 目标的直接子元素 -->
  <q-tooltip>
    <!--
      构成工具提示的DOM元素，
      在此例中是简单的文字：
    -->
    Some text as content of Tooltip
  </q-tooltip>
</q-btn>

这个想法是将QTooltip放置在作为触发器的DOM元素/组件中（作为DOM层次结构的直接子元素）。不用担心QTooltip内容会从容器继承CSS。 这不会发生，因为QTooltip将作为<body>的直接子节点注入。

通过v-model切换

<template>
  <div>
    <q-btn color="primary" @click="showing = true" label="Show" />
    <q-btn color="primary" @close="showing = false" label="Hide" />

    <div>
      ...
      <q-tooltip v-model="showing">...</q-tooltip>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showing: false
    }
  }
}
</script>

Vue属性

Vue属性 类型 说明
anchor 对象 bottom left形式的字符串（垂直水平）。
self 对象 top left形式的字符串（垂直水平）。
offset 2个数字的数组 水平和垂直偏移（以像素为单位）。例如：[18,18]。
max-height 字符串 工具提示内容的可选最大高度。例如：500px
delay 数字 设置延迟，当工具提示要显示时。
disable 布尔 当设置为“true”时，工具提示不会被触发。

Vue方法

Vue方法 说明
show() 打开工具提示。
hide() 关闭工具提示。
toggle() 切换打开/关闭状态。

处理定位

QTooltip的位置可以自定义。它记录了可选的Vue属性anchor和self。看看DEMO。

计算QTooltip弹出窗口的最终位置，使其显示在可用的屏幕空间上，必要时切换到右侧 和/或 顶部。

弹出框 Ajax栏