Tippy.js

Tippy.js is the complete tooltip, popover, dropdown, and menu solution for the web

Setup with Vite

Stop the dev server
Install Tippy with the console command npm install tippy.js --save-dev
Open resources/js/app.js and add the following code:

import './bootstrap';     

import {delegate} from 'tippy.js';     
import 'tippy.js/dist/tippy.css';
import 'tippy.js/animations/shift-toward-subtle.css';

// Default configuration for Tippy with event delegation (https://atomiks.github.io/tippyjs/v6/addons/#event-delegation
delegate('body', {
    interactive: true,
    allowHTML: true,
    animation: 'shift-toward-subtle',
    target: '[data-tippy-content]',
});

import './bootstrap';     

import {delegate} from 'tippy.js';     
import 'tippy.js/dist/tippy.css';
import 'tippy.js/animations/shift-toward-subtle.css';

// Default configuration for Tippy with event delegation (https://atomiks.github.io/tippyjs/v6/addons/#event-delegation
delegate('body', {
    interactive: true,
    allowHTML: true,
    animation: 'shift-toward-subtle',
    target: '[data-tippy-content]',
});

Usage

Now you can use the data-tippy-content attribute to create tooltips on an element, e.g.

html

<button
    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
    data-tippy-content="I'm a Tippy tooltip!">
    Hover Me
</button>

<button
    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
    data-tippy-content="I'm a Tippy tooltip!">
    Hover Me
</button>

Tippy.js ​

Setup with Vite ​

Usage ​

Tippy.js

Setup with Vite

Usage