# 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 cusomize the output HTML classes:

:classes="{ root: 'root-class', content: 'content-class' }"
Last Updated: 5/21/2020, 5:43:27 AM