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.

Source

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 →