# Tooltip

WIP: Still need to add transitions, but feel free to copy from source.

A component that let's you add a tooltip to an element.


  • Supports keyboard navigation for the target DOM node.
  • Toggles the tooltip on hover and/or focus.
  • Includes role="tooltip" attribute for tooltip content.
  • Manages aria-hidden and aria-describedby attributes.

# Installation


// main.js
import Vue from 'vue';
import { VTooltip } from 'vuetensils/src/components';

Vue.component('VTooltip', VTooltip);


// SomeComponent.vue
import { VTooltip } from 'vuetensils/src/components';

export default {
  components: {
  // ...

# Default Example

Try tabbing through these elements.

# Tabbing Example

Try tabbing through these elements.

# Custom root tag

# Only on focus

Hovering over the target will not do anything, but you can click on it or tab to it to enable the focus state.

# Custom Classes

This component can accept a classes prop to customize the output HTML classes:

:classes="{ root: 'root-class', content: 'content-class' }"
Last Updated: 12/18/2020, 10:17:28 AM