Tooltip | Vuetensils

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.

Features:

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

Globally:

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

Vue.component("VTooltip", VTooltip)

Locally:

<script>
// SomeComponent.vue
import { VTooltip } from "vuetensils/src/components"

export default {
  components: {
    VTooltip,
  },
  // ...
}
</script>

# 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' }"

← Toggle Try →