VEUI

VEUI on GitHub
中文

Tooltip

Demos

Style variants

Available style variant for the ui prop: alt.

Move your mouse pointer over here.
Edit this demo on GitHubEdit
<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

Use the position prop to specify the placement of the tooltip.

Edit this demo on GitHubEdit
<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>

Triggers

Use the trigger prop to specify when to show/hide the tooltip.

trigger="hover"
Open trigger:
hover
Close trigger:
hover
Trigger hover over here.
Edit this demo on GitHubEdit
<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

Props

NameTypeDefaultDescription
uistring=-

Style variants.

ValueDescription
altReverse style.
sSmall style.
mMedium style.
openbooleanfalse

.sync

Whether the tooltip is displayed.

targetstring | Vue | Node-See the target prop of thh Overlay component.
positionstring'top'

Denotes the target element of the tooltip. Used with Popper.js-style placement syntax, see Popper.placements.

aim-centerbooleanfalseWhether the tooltip arrow always points to the center of the target element.
triggerstring'hover'

The event that triggers the toggle of the tooltip. Can take valid values for v-outside directive's trigger parameter, and can use `${open}-${close}` syntax to specify different trigger event for showing/hiding the tooltip. When specified as custom, v-outside will not be leveraged to automatically toggle the tooltip.

eg. click denotes showing the tooltip after clicking the target and hiding it after clicking outside. hover-mousedown denotes showing the tooltip after hovering the target, and hiding it after clicking outside.

interactivebooleantrueWhether the tooltip content is interactive. When set to false, the tooltip will be automatically hidden after the event specified by trigger is triggered outside the target.
hide-delaynumbertooltip.hideDelaysTime (in milliseconds) to wait before hiding the tooltip after the close trigger is triggered. Can be used to prevent the tooltip being immediately closed after pointer leaves the target element and before it enters the tooltip itself.
overlay-classstring | Array | Object=-See the overlay-class prop of the Overlay component.
overlay-stylestring | Array | Object=-See the overlay-style prop of the Overlay component.

Slots

NameDescription
defaultThe content of the tooltip.

Configs

KeyTypeDefaultDescription
tooltip.hideDelaynumber300See the hide-delay prop.
Edit this page on GitHubEdit
© Baidu, Inc. 2023