VEUI

VEUI on GitHub
English

Tooltip 浮层提示

示例

风格

可选的风格 ui 属性值:alt

Move your mouse pointer over here.
在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-checkbox
      v-model="ui"
      true-value="reverse"
      :false-value="null"
      ui="s"
    >
      Reverse style
    </veui-checkbox>
  </section>
  <section>
    <span ref="text">Move your mouse pointer over here.</span>
    <veui-tooltip
      target="text"
      :ui="ui"
    >
      This is a tooltip.
    </veui-tooltip>
  </section>
</article>
</template>

<script>
import { Tooltip, Checkbox } from 'veui'

export default {
  components: {
    'veui-tooltip': Tooltip,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      ui: null
    }
  }
}
</script>

<style lang="less" scoped>
section + section {
  margin-top: 20px;
}
</style>

定位

使用 position 属性来指定浮层显示的位置。

使用 aim-center 属性来设置浮层提示箭头始终对准目标元素中心,适合用于目标元素较小的场景。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-checkbox
      v-model="aimCenter"
      ui="s"
    >
      Aim center
    </veui-checkbox>
  </section>
  <section class="grid">
    <veui-tooltip
      :open.sync="open"
      :target="target"
      :position="position"
      :aim-center="aimCenter"
    >
      Hello.
    </veui-tooltip>
    <veui-button
      ref="top-start"
      style="grid-area: 1 / 2"
      @mouseenter="show('top-start')"
    >
      top-start
    </veui-button>
    <veui-button
      ref="top"
      style="grid-area: 1 / 3"
      @mouseenter="show('top')"
    >
      top
    </veui-button>
    <veui-button
      ref="top-end"
      style="grid-area: 1 / 4"
      @mouseenter="show('top-end')"
    >
      top-end
    </veui-button>
    <veui-button
      ref="right-start"
      style="grid-area: 2 / 5"
      @mouseenter="show('right-start')"
    >
      right-start
    </veui-button>
    <veui-button
      ref="right"
      style="grid-area: 3 / 5"
      @mouseenter="show('right')"
    >
      right
    </veui-button>
    <veui-button
      ref="right-end"
      style="grid-area: 4 / 5"
      @mouseenter="show('right-end')"
    >
      right-end
    </veui-button>
    <veui-button
      ref="bottom-start"
      style="grid-area: 5 / 2"
      @mouseenter="show('bottom-start')"
    >
      bottom-start
    </veui-button>
    <veui-button
      ref="bottom"
      style="grid-area: 5 / 3"
      @mouseenter="show('bottom')"
    >
      bottom
    </veui-button>
    <veui-button
      ref="bottom-end"
      style="grid-area: 5 / 4"
      @mouseenter="show('bottom-end')"
    >
      bottom-end
    </veui-button>
    <veui-button
      ref="left-start"
      style="grid-area: 2 / 1"
      @mouseenter="show('left-start')"
    >
      left-start
    </veui-button>
    <veui-button
      ref="left"
      style="grid-area: 3 / 1"
      @mouseenter="show('left')"
    >
      left
    </veui-button>
    <veui-button
      ref="left-end"
      style="grid-area: 4 / 1"
      @mouseenter="show('left-end')"
    >
      left-end
    </veui-button>
  </section>
</article>
</template>

<script>
import { Tooltip, Button, Checkbox } from 'veui'

export default {
  components: {
    'veui-tooltip': Tooltip,
    'veui-button': Button,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      target: null,
      position: null,
      open: false,
      aimCenter: false
    }
  },
  methods: {
    show (position) {
      this.target = this.$refs[position]
      this.position = position
      this.open = true
    }
  }
}
</script>

<style lang="less" scoped>
section + section {
  margin-top: 20px;
}

.grid {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-gap: 12px;
  justify-content: center;
  align-items: center;
}
</style>

触发时机

使用 trigger 属性来指定显示/隐藏浮层的时机。

trigger="hover"
Open trigger:
hover
Close trigger:
hover
Trigger hover over here.
在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <code>trigger="{{ trigger }}"</code>
  </section>
  <section>
    Open trigger: <veui-select
      v-model="open"
      :options="triggers"
    />
  </section>
  <section>
    Close trigger: <veui-select
      v-model="close"
      :options="triggers"
    />
  </section>
  <section>
    <span
      ref="text"
      tabindex="0"
    >Trigger <b><code>{{ open }}</code></b> over here.</span>
    <veui-tooltip
      target="text"
      :trigger="trigger"
    >
      This is a tooltip.
    </veui-tooltip>
  </section>
</article>
</template>

<script>
import { Tooltip, Select } from 'veui'

export default {
  components: {
    'veui-tooltip': Tooltip,
    'veui-select': Select
  },
  data () {
    return {
      open: 'hover',
      close: 'hover',
      triggers: [
        { label: 'hover', value: 'hover' },
        { label: 'click', value: 'click' },
        { label: 'mousedown', value: 'mousedown' },
        { label: 'mouseup', value: 'mouseup' },
        { label: 'focus', value: 'focus' }
      ]
    }
  },
  computed: {
    trigger () {
      if (this.open === this.close) {
        return this.open
      }
      return `${this.open}-${this.close}`
    }
  }
}
</script>

<style lang="less" scoped>
section + section {
  margin-top: 20px;
}

span {
  outline: none;

  &.focus-visible {
    outline: 2px solid #ccc;
    outline-offset: 3px;
  }
}
</style>

API

属性

名称类型默认值描述
uistring=-

预设样式。

描述
reverse反色样式。
s小尺寸样式。
m中尺寸样式。
openbooleanfalse

.sync

是否显示浮层提示。

targetstring | Vue | Node-参考 Overlay 组件的 target 属性。
positionstring'top'

指定定位参数。使用 Popper.js 风格的定位语法指定,可参考 Popper.placements

aim-centerbooleanfalse指定浮层提示箭头是否始终指向目标元素中心。
triggerstring'hover'

触发浮层提示的方式。支持指定的值为 v-outside 指令绑定值的 trigger 参数,并支持使用 `${open}-${close}` 语法分别指定触发打开/关闭提示的时机。另外,当 trigger 指定为 custom 时,将不会使用 v-outside 功能自动进行处理。

例如:click 表示点击 target 后打开,在空白处点击时关闭;hover-mousedown 表示光标移入 target 后打开,在空白处按下鼠标时关闭。

interactivebooleantrue浮层内容是否允许交互。如果为 false 则在 target 外满足 trigger 指定的条件浮层即自动关闭。
autofocusboolean-是否自动抢占焦点到浮层内的第一个可聚焦元素。
hide-delaynumbertooltip.hideDelays触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 target 后移入浮层进行交互前已经自动关闭。
overlay-classstring | Array | Object=-参考 Overlay 组件的 overlay-class 属性。
overlay-stylestring | Array | Object=-参考 Overlay 组件的 overlay-style 属性。

插槽

名称描述
default浮层提示内容。

事件

名称描述
toggle

v-model

浮层提示展开状态切换时触发,回调参数为 (open: boolean)

全局配置

配置项类型默认值描述
tooltip.hideDelaynumber300hide-delay 属性。
在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2023