VEUI

Demos

Style variants

Available style variant for the ui prop: alt.

Alternative style

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

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

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>

Triggers

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

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

Props

Name Type Default Description

ui

string

Style variants.

Value	Description
`alt`	Alternative styles.
`large`	Large styles.
`small`	Small styles.

open

boolean

false

.sync

Whether the tooltip is displayed.

target string|Vue|Node - See the target prop of thh Overlay component. The placement is specified with the position prop.

position

string

'top'

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

trigger

string

'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.

interactive boolean true Whether 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-delay number tooltip.hideDelays Time (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-class string|Array|Object - See the overlay-class prop of the Overlay component.

Slots

Name	Description
`default`	The content of the tooltip.

Global config

Key	Type	Default	Description
`tooltip.hideDelay`	`number`	`300`	See the `hide-delay` prop.