v-tooltip-lite

Vue Tooltip | DropDown

A lightweight and customizable Vue 3 tooltip/dropdown component with support for hover and click triggers, customizable placement, offset, and arrow styles, featuring accessibility and responsive design.

Features

• Multiple Trigger Modes: Supports hover and click triggers for flexible interaction.
• Customizable Placement: Position tooltips with 12 placement options (e.g., top, bottom, left, right, etc.).
• Responsive Design: Adapts to various screen sizes with a clean, modern UI.
• Accessibility: Includes ARIA attributes for enhanced usability.
• Customizable Styling: Flexible CSS variables for background, text, border, shadow, and arrow styles.
• Performance Optimized: Uses Vue 3 composition API for efficient rendering and positioning.
• TypeScript Support: Fully typed with TypeScript for better developer experience.

Demo

Live Demo

Installation

# npm
npm install v-tooltip-lite

# yarn
yarn add v-tooltip-lite

# pnpm
pnpm add v-tooltip-lite

Don't forget to follow me on GitHub!

Usage

Below are examples demonstrating different configurations of the Vue Tooltip component.

1. Basic Hover Tooltip

A simple tooltip with hover trigger and default bottom placement.

<script setup>
import ToolTip from 'v-tooltip-lite'
import 'v-tooltip-lite/style.css'
</script>

<template>
   <div>
      <h3>Basic Tooltip</h3>
      <ToolTip content="This is a tooltip">
         <template #trigger>
            <button>Hover Me</button>
         </template>
      </ToolTip>
   </div>
</template>

📁 Importing Styles

You must import the CSS styles:

import 'v-tooltip-lite/dist/style.css'

2. Click-Triggered Tooltip

A tooltip that appears on click and closes on another click.

<ToolTip content="Click again to close!" trigger="click" placement="top">
    <template #trigger>
      <button>Click Me</button>
    </template>
</ToolTip>

3. Tooltip Without Arrow

A tooltip without the arrow for a cleaner look.

<ToolTip content="No arrow tooltip" :arrow="false" placement="right">
      <template #trigger>
        <button>Hover Me</button>
      </template>
</ToolTip>

4. Custom Content Tooltip

A tooltip with custom HTML content.

<ToolTip placement="bottom">
    <template #trigger>
      <button>Custom Content</button>
    </template>
    <template #default>
      <div style="text-align: left">
          <h4>Custom Content</h4>
          <p style="margin-top: 4px; font-size: 0.7rem">
            You can place <code>HTML</code> here, including formatting.
          </p>
      </div>
    </template>
</ToolTip>

5. Long Text Tooltip

A tooltip with long text that wraps within the maximum width.

<ToolTip
   content="This is a very long tooltip text that will wrap and test the max width of the tooltip. Keep hovering to read all of it."
   placement="bottom">
      <template #trigger>
        <button>Hover Me</button>
      </template>
</ToolTip>

Props

Prop	Type	Default	Description
content	string	''	The tooltip content (used if no default slot is provided).
placement	string	'bottom-end'	Popper.js placement (e.g., top, bottom, left, right, etc.).
offset	[number, number]	[0, 8]	Offset for the tooltip from the trigger element [skidding, distance].
trigger	'hover' | 'click'	'hover'	Trigger mode for showing/hiding the tooltip.
arrow	boolean	true	Whether to display the tooltip arrow.
triggerClass	string	''	Class to be applied to the trigger element.
styles	Record<string, string>	{}	Custom styles for the tooltip container.
teleport	boolean	true	Whether to teleport the tooltip to the body.
isOpen	boolean	undefined	Whether the tooltip is open.
ignoreClickOutside	string[]	[]	Array of CSS selectors to ignore click outside of.

Events

Event	Description
onShow	Emitted when the tooltip becomes visible.
onHide	Emitted when the tooltip is hidden.

Styling

Customize the appearance using the following CSS variables defined in style.css:

:root {
   --tooltip-bg: #000000;
   --tooltip-text: #ffffff;
   --tooltip-border: rgba(255, 255, 255, 0.1);
   --tooltip-radius: 0.375em;
   --tooltip-shadow:
      0 0.625em 1.5625em -0.3125em rgba(0, 0, 0, 0.1), 0 0.25em 0.375em -0.125em rgba(0, 0, 0, 0.05);
   --tooltip-arrow-size: 0.475em;
   --tooltip-z-index: 999989;
   --tooltip-font-size: 0.75em;
   --tooltip-line-height: 1.4;
   --tooltip-padding: 0.6em 0.5em;
   --tooltip-min-width: 3.125em;
}

Author

safdar-azeem