VEUI

VEUI on GitHub
Play!中文

Tooltip

Examples

Style variants

Available ui prop values: 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>

Positioning

Use the position prop to specify the position 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>

Trigger

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-

Predefined styles.

ValueDescription
reverseReversed style.
sSmall size style.
mMedium size style.
openbooleanfalse

.sync

Specifies whether to show the tooltip or not.

targetstring | Vue | Node-Refers to the target prop of the Overlay component.
positionstring'top'

Specifies the positioning options. Uses the positioning syntax of Popper.js, see Popper.placements for more information.

aim-centerbooleanfalseSpecifies whether the tooltip arrow should always point to the center of the target element.
triggerstring'hover'

Specifies how to trigger the tooltip. The supported values are the trigger option of the v-outside directive binding value, and the `${open}-${close}` syntax specifies the timing of opening/closing the tooltip respectively. In addition, when trigger is set to custom, the v-outside functionality will not be automatically applied.

For example, click means that the tooltip opens when the target is clicked and closes when the blank space is clicked; hover-mousedown means that the tooltip opens when the cursor enters the target and closes when the mouse is pressed in the blank space.

interactivebooleantrueSpecifies whether the content of the tooltip can be interacted with. If false, the tooltip will automatically close when the conditions specified by trigger are met outside of the target.
autofocusboolean-Specifies whether to automatically focus on the first focusable element inside the tooltip.
hide-delaynumbertooltip.hideDelaysThe number of milliseconds to wait before closing the tooltip after the conditions for closing are met. This can be used to prevent the tooltip from closing automatically before interacting with it after moving the cursor out of the target.
overlay-classstring | Array | Object-Refers to the overlay-class prop of the Overlay component.
overlay-stylestring | Array | Object-Refers to the overlay-style prop of the Overlay component.

Slots

NameDescription
defaultThe content of the tooltip.

Events

NameDescription
toggle

v-model

Triggered when the tooltip's open state is toggled. The callback parameter is (open: boolean).

Configs

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