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.

• 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.

Default Example

Try tabbing through these elements.

<template>
  <div>
    <VTooltip>
      <template #tooltip>
        heyo :)
      </template>

      I have a tooltip!
    </VTooltip>
  </div>
</template>

I have a tooltip! heyo :)

Tabbing Example

Try tabbing through these elements.

<template>
  <div>
    <button>before</button>

    <VTooltip>
      <template #tooltip>
        heyo :)
      </template>

      I have a tooltip!
    </VTooltip>

    <button>after</button>
  </div>
</template>

I have a tooltip! heyo :)

Custom root tag

<template>
  <VTooltip tag="div">
    <template #tooltip>
      heyo :)
    </template>

    <h1>I have a tooltip!</h1>
  </VTooltip>
</template>

I have a tooltip!

heyo :)

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.

<template>
  <VTooltip focus>
    <template #tooltip>
      heyo :)
    </template>

    I have a tooltip!
  </VTooltip>
</template>

I have a tooltip! heyo :)

Custom Classes

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

:classes="{ root: string, content: string }"