# Tippy.js

Tippy.js (opens new window) is the complete tooltip, popover, dropdown, and menu solution for the web

# Setup Tippy.js 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 {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]',
});

1
2
3
4
5
6
7
8
9
10
11
12
13

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

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

1
2
3
4
5

Tippy tooltip