# 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.
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
andaria-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 customize the output HTML classes:
:classes="{ root: 'root-class', content: 'content-class' }"