Tailwind Tooltip

Tooltip an element using only CSS classes!

Visit the website to see a demo.

Installation 📖

Package install

Install the package with your favorite package manager:

• npm

npm install tailwind-tooltip

• pnpm

pnpm install tailwind-tooltip

• yarn

yarn add tailwind-tooltip

Plugin Implementation

Add the plugin to your Tailwind CSS project:

// tailwind.config.mjs
import tooltip from 'tailwind-tooltip'

export default {
  // rest of the options
  plugins: [
    tooltip
  ],
}

Usage ⚙️

Example

Here are some simple examples of how to use this plugin:

    <button
      id="tooltip-top"
      class="tooltip-t" <-- add a tooltip
      data-tooltip-text="Copy to clipboard" <-- add tooltip text
    >
      Hover me!
    </button>

    <button
      id="tooltip-top"
      class="tooltip-t tooltip-bg-slate-800 tooltip-text-white" <-- change tooltip colors
      data-tooltip-text="Copy to clipboard"
    >
      Hover me!
    </button>

    <button
      id="tooltip-top"
      class="tooltip-t tooltip-size-xl" <-- change tooltip size
      data-tooltip-text="Copy to clipboard"
    >
      Hover me!
    </button>