提示

当用户将鼠标悬停在元素上时，v-tooltip 组件可用于传递信息。 您还可以通过 v-model 以编程方式控制工具提示的显示。 激活后，工具提示将显示标识元素的文本标签，例如其功能说明。

为了正确定位 v-tooltip，需要一个位置支撑 ( top | bottom | left | right )

用例

提示组件可以包装任何元素。

template

<template>
  <div class="text-center d-flex align-center">
    <v-tooltip bottom>
      <template v-slot:activator="{ on }">
        <v-btn color="primary" dark v-on="on">Button</v-btn>
      </template>
      <span>Tooltip</span>
    </v-tooltip>
    <v-tooltip bottom>
      <template v-slot:activator="{ on }">
        <v-icon color="primary" dark v-on="on">mdi-home</v-icon>
      </template>
      <span>Tooltip</span>
    </v-tooltip>
    <v-tooltip bottom>
      <template v-slot:activator="{ on }">
        <span v-on="on">This text has a tooltip</span>
      </template>
      <span>Tooltip</span>
    </v-tooltip>
  </div>
</template>

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

示例

下面是一些简单到复杂的例子。

对齐

提示可以对齐到激活器元素的四个侧面

template

<template>
  <div class="text-center">
    <v-tooltip left>
      <template v-slot:activator="{ on }">
        <v-btn color="primary" dark v-on="on">Left</v-btn>
      </template>
      <span>Left tooltip</span>
    </v-tooltip>
    <v-tooltip top>
      <template v-slot:activator="{ on }">
        <v-btn color="primary" dark v-on="on">Top</v-btn>
      </template>
      <span>Top tooltip</span>
    </v-tooltip>
    <v-tooltip bottom>
      <template v-slot:activator="{ on }">
        <v-btn color="primary" dark v-on="on">Bottom</v-btn>
      </template>
      <span>Bottom tooltip</span>
    </v-tooltip>
    <v-tooltip right>
      <template v-slot:activator="{ on }">
        <v-btn color="primary" dark v-on="on">Right</v-btn>
      </template>
      <span>Right tooltip</span>
    </v-tooltip>
  </div>
</template>

可见性

提示可见性可以使用 v-model 以编程方式进行更改。

template script

<template>
  <v-container fluid class="text-center">
    <v-row
      class="flex"
      justify="space-between"
    >
      <v-col cols="12">
        <v-btn @click="show = !show">toggle</v-btn>
      </v-col>
      <v-col cols="12" class="mt-12">
        <v-tooltip v-model="show" top>
          <template v-slot:activator="{ on }">
            <v-btn icon v-on="on">
              <v-icon color="grey lighten-1">mdi-cart</v-icon>
            </v-btn>
          </template>
          <span>Programmatic tooltip</span>
        </v-tooltip>
      </v-col>
    </v-row>
  </v-container>
</template>

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