# 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]', });
Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
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>
Copied!
1
2
3
4
5
2
3
4
5