VEUI

The v-tooltip directive is used to add tooltip information to the target element by using the Tooltip component.

VEUI provides a unified experience optimization for globally defined tooltip prompts through v-tooltip. When the cursor first enters a global tooltip, a global timer for the "warm-up period" is activated. During the warm-up period, if the cursor moves out of the target area, the tooltip will not be displayed; if the cursor stays in a target area until the end of the warm-up period, the tooltip will be displayed immediately when the cursor hovers over any global tooltip area. When the cursor moves out of the global tooltip area, the "cooldown period" timer will be activated. During the "cooldown period", if the cursor enters the target area again, the tooltip will be displayed immediately; only if the cursor is outside the target area for more than the "cooldown period" time, it will return to the initial state, and the tooltip prompt needs to be reheated to trigger again.

Examples

Basic

Edit this demo on GitHubEdit

<template>
<article>
  <veui-button
    v-tooltip="'Preview'"
    class="button"
    ui="icon"
  >
    <veui-icon name="zoom-in"/>
  </veui-button>
  <veui-button
    v-tooltip="'Upload'"
    class="button"
    ui="icon"
  >
    <veui-icon name="upload"/>
  </veui-button>
  <veui-button
    v-tooltip="'Remove'"
    class="button"
    ui="icon"
  >
    <veui-icon name="trash"/>
  </veui-button>
</article>
</template>

<script>
import { Button, Icon, tooltip } from 'veui'
import 'veui-theme-dls-icons/zoom-in'
import 'veui-theme-dls-icons/upload'
import 'veui-theme-dls-icons/trash'

export default {
  components: {
    'veui-button': Button,
    'veui-icon': Icon
  },
  directives: {
    tooltip
  }
}
</script>

<style lang="less" scoped>
.button + .button {
  margin-left: 8px;
}
</style>

Display on overflow

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos consequatur ad hic aspernatur maiores adipisci velit nostrum nobis, cum earum, incidunt repellendus ex! Fuga, fugit! Placeat quam ex minima laudantium.

Lorem upsum.

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <div
      v-tooltip.overflow
      class="item"
    >
      {{ loremIpsum }}
    </div>
    <div
      v-tooltip.overflow="loremIpsum"
      class="item"
    >
      Lorem upsum.
    </div>
  </section>
</article>
</template>

<script>
import { tooltip } from 'veui'

const loremIpsum = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos consequatur ad hic aspernatur maiores adipisci velit nostrum nobis, cum earum, incidunt repellendus ex! Fuga, fugit! Placeat quam ex minima laudantium.'

export default {
  directives: {
    tooltip
  },
  data () {
    return {
      loremIpsum
    }
  }
}
</script>

<style lang="less" scoped>
.item {
  display: inline-block;
  margin-right: 12px;
  width: 200px;
  border: 1px solid #ccc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

API

Please refer to the official document for the specific usage of the directive. For more detailed parameters, please refer to Custom Directive.

Options

Type: string | Object.

Using string type represents the text information of the tooltip:

<button v-tooltip="Add">+</button>

When using Object type, the options can fully configure all parameters. For example:

<button v-tooltip="{
  content: 'Add',
  position: 'top',
  disabled: false
}">+</button>

Name	Type	Default	Description
`content`	`string \| VNode \| Array<VNode>`	-	The string of the tooltip information, or the virtual node (array) returned by the rendering function. If not passed, the `textContent` of the corresponding element will be used by default.
`position`	`string`	-	The display position of the tooltip. Refer to the `position` property of the `Tooltip` component.
`overflow`	`boolean`	`false`	Whether to display the tooltip only when the content of the target element overflows the container.
`disabled`	`boolean`	`false`	Whether to disable the tooltip.

The parameters provided by the Object type will override the parameters specified by the directive arguments and modifiers.

Modifiers

Corresponding to the position / overflow in the Object type options. For example:

<span v-tooltip.bottom-end.overflow="Add">A paragraph of very long text...</span>

Configs

Key	Type	Default	Description
`tooltip.warmup`	`number`	`800`	The number of milliseconds required to complete the "warm-up" period.
`tooltip.cooldown`	`number`	`800`	The number of milliseconds required to complete the "cooldown" period.

Edit this page on GitHubEdit