Tooltip 文字提示

基础用法

通过使用v-tooltip指令, 给元素添加文字提示。

<template>
  <div>
    <l-row justify="center">
      <l-button
        status="primary"
        v-tooltip="{
          content: 'This is a two-line tooltip content.This is a two-line tooltip content.',
          position: 'top'
        }"
        >Top</l-button
      >
    </l-row>
    <l-row justify="space-between" :span="24">
      <l-col :span="4">
        <l-button
          status="primary"
          v-tooltip="{
            content: 'This is a two-line tooltip content.This is a two-line tooltip content.',
            position: 'left'
          }"
          >Left</l-button
        >
      </l-col>
      <l-col :span="4">
        <l-button
          status="primary"
          v-tooltip="{
            content: 'This is a two-line tooltip content.This is a two-line tooltip content.',
            position: 'right'
          }"
          >Right</l-button
        >
      </l-col>
    </l-row>
    <l-row justify="center">
      <l-button
        status="primary"
        v-tooltip="{
          content: 'This is a two-line tooltip content.This is a two-line tooltip content.',
          position: 'bottom'
        }"
        >Bottom</l-button
      >
    </l-row>
  </div>
</template>

修饰符用法

通过位置修饰符position来控制文字提示的位置。

<template>
  <div>
    <l-row justify="center">
      <l-button
        status="primary"
        v-tooltip.top="'This is a two-line tooltip content.This is a two-line tooltip content.'"
        >Top</l-button
      >
    </l-row>
    <l-row justify="space-between" :span="24">
      <l-col :span="4">
        <l-button
          status="primary"
          v-tooltip.left="'This is a two-line tooltip content.This is a two-line tooltip content.'"
          >Left</l-button
        >
      </l-col>
      <l-col :span="4">
        <l-button
          status="primary"
          v-tooltip.right="'This is a two-line tooltip content.This is a two-line tooltip content.'"
          >Right</l-button
        >
      </l-col>
    </l-row>
    <l-row justify="center">
      <l-button
        status="primary"
        v-tooltip.bottom="'This is a two-line tooltip content.This is a two-line tooltip content.'"
        >Bottom</l-button
      >
    </l-row>
  </div>
</template>

Tooltip API

Options

属性名	描述	类型	默认值
content	文字提示内容	string	-
position	文字提示位置	string	top
delay	延迟显示时间	number	100