Tooltip 浮层提示

示例

风格

可选的风格 ui 属性值：alt。

Move your mouse pointer over here.
<template>
<article>
  <section>
    <veui-checkbox
      v-model="ui"
      true-value="alt"
      :false-value="null"
      ui="small"
    >
      Alternative 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>

定位

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

top-start
top
top-end
left-start
right-start
left
right
left-end
right-end
bottom-start
bottom
bottom-end
<template>
<article>
  <veui-grid-container :columns="5">
    <veui-grid-row>
      <veui-grid-column
        :span="1"
        :offset="1"
      >
        <span
          ref="ts"
          class="target"
        >top-start</span>
        <veui-tooltip
          target="ts"
          position="top-start"
        >
          Hello.
        </veui-tooltip>
      </veui-grid-column>
      <veui-grid-column :span="1">
        <span
          ref="t"
          class="target"
        >top</span>
        <veui-tooltip
          target="t"
          position="top"
        >
          Hello.
        </veui-tooltip>
      </veui-grid-column>
      <veui-grid-column :span="1">
        <span
          ref="te"
          class="target"
        >top-end</span>
        <veui-tooltip
          target="te"
          position="top-end"
        >
          Hello.
        </veui-tooltip>
      </veui-grid-column>
    </veui-grid-row>
    <veui-grid-row>
      <veui-grid-column :span="1">
        <span
          ref="ls"
          class="target"
        >left-start</span>
        <veui-tooltip
          target="ls"
          position="left-start"
        >
          Hello.
        </veui-tooltip>
      </veui-grid-column>
      <veui-grid-column
        :span="1"
        :offset="3"
      >
        <span
          ref="rs"
          class="target"
        >right-start</span>
        <veui-tooltip
          target="rs"
          position="right-start"
        >
          Hello.
        </veui-tooltip>
      </veui-grid-column>
    </veui-grid-row>
    <veui-grid-row>
      <veui-grid-column :span="1">
        <span
          ref="l"
          class="target"
        >left</span>
        <veui-tooltip
          target="l"
          position="left"
        >
          Hello.
        </veui-tooltip>
      </veui-grid-column>
      <veui-grid-column
        :span="1"
        :offset="3"
      >
        <span
          ref="r"
          class="target"
        >right</span>
        <veui-tooltip
          target="r"
          position="right"
        >
          Hello.
        </veui-tooltip>
      </veui-grid-column>
    </veui-grid-row>
    <veui-grid-row>
      <veui-grid-column :span="1">
        <span
          ref="le"
          class="target"
        >left-end</span>
        <veui-tooltip
          target="le"
          position="left-end"
        >
          Hello.
        </veui-tooltip>
      </veui-grid-column>
      <veui-grid-column
        :span="1"
        :offset="3"
      >
        <span
          ref="re"
          class="target"
        >right-end</span>
        <veui-tooltip
          target="re"
          position="right-end"
        >
          Hello.
        </veui-tooltip>
      </veui-grid-column>
    </veui-grid-row>
    <veui-grid-row>
      <veui-grid-column
        :span="1"
        :offset="1"
      >
        <span
          ref="bs"
          class="target"
        >bottom-start</span>
        <veui-tooltip
          target="bs"
          position="bottom-start"
        >
          Hello.
        </veui-tooltip>
      </veui-grid-column>
      <veui-grid-column :span="1">
        <span
          ref="b"
          class="target"
        >bottom</span>
        <veui-tooltip
          target="b"
          position="bottom"
        >
          Hello.
        </veui-tooltip>
      </veui-grid-column>
      <veui-grid-column :span="1">
        <span
          ref="be"
          class="target"
        >bottom-end</span>
        <veui-tooltip
          target="be"
          position="bottom-end"
        >
          Hello.
        </veui-tooltip>
      </veui-grid-column>
    </veui-grid-row>
  </veui-grid-container>
</article>
</template>

<script>
import { GridContainer, GridRow, GridColumn, Tooltip } from 'veui'

export default {
  components: {
    'veui-grid-container': GridContainer,
    'veui-grid-row': GridRow,
    'veui-grid-column': GridColumn,
    'veui-tooltip': Tooltip
  },
  data () {
    return {
      ui: null
    }
  }
}
</script>

触发时机

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

trigger="hover"
Open trigger:
Close trigger:
Trigger hover over here.
<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>

API

属性

名称类型默认值描述
uistring-

预设样式。

值描述
alt备选样式。
large大尺寸样式。
small小尺寸样式。
openbooleanfalse

.sync

是否显示浮层提示。

targetstring|Vue|Node-参考 Overlay 组件的 target 属性。定位方式优先使用 position 属性进行指定。
positionstring'top'

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

triggerstring'hover'

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

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

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

插槽

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

全局配置

配置项类型默认值描述
tooltip.hideDelaynumber300见 hide-delay 属性。