FreeWeb
Grey 3D button with hover effect by cssbuttons-io
- 386386 downloads
- 243243 likes
- 153153 saves
Works with
- Claude Code
- Codex
- Cursor
- and 3 more
Tailwind tooltips in four positions v1.0.0
Use this resource to add tooltips positioned around an element
New
- 536 downloads
- 124 likes
- 125 saves
Free
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install tailwind-tooltip-four-positionsFirst time: connect the CLI with
npx --yes palatekit@latest loginThe agent reuses the resource tooltip pattern, with a diamond arrow, for the position you need. Everything is done with Tailwind classes (group, hover). You get clean help bubbles with no JavaScript.
Updated November 2, 2026
Previews
Details
- Install guides
- Generates with
- Your agent's model
- Uses
- Tailwind CSS
- Licence
- MIT
Similar resources
View all- Free
FreeWeb
Black button with hover effect "Massive Mayfly" by cssbuttons-io
- 334334 downloads
- 194194 likes
- 201201 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
Teal 3D button with hover effect by cssbuttons-io
- 336336 downloads
- 145145 likes
- 207207 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
Green loader by fanishah
- 381381 downloads
- 221221 likes
- 209209 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
Green button with hover effect by cssbuttons-io
- 415415 downloads
- 153153 likes
- 145145 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
White button by YUGE0
- 412412 downloads
- 193193 likes
- 123123 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
Animated white 3D button by cssbuttons-io
- 366366 downloads
- 194194 likes
- 202202 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
White 3D card with hover effect by javierBarroso
- 388388 downloads
- 153153 likes
- 193193 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
What you get
- README.md: step-by-step integration guide
- Tooltips/ayman-ashine_terrible-puma-8.html: the component HTML and CSS, ready to copy
- The variables and selectors to edit for colours and size
Good fit for
- Product page with hover details
- App toolbar
- Help on form fields
Not for
- A project without Tailwind CSS
- Tooltips that must contain links or buttons
Tags
- tooltip
- tailwind
- hover
- help
- ui
About
You say
"Add tooltips to the right of each sidebar icon using the resource pattern."
Component published by ayman-ashine on Uiverse under the MIT license, documented by PalateKit.
Show moreShow less
Prerequisites
- You bring
- The tooltip text and The element to annotate
- Dependencies
- Tailwind CSS
How to use it
- Give the resource to your coding agent
- Ask it to insert the component where you want it and adapt text and colours
- Open the page and check hover and mobile rendering
Content preview
Files
- LICENSE1.1 KB
- NOTICE-PALATEKIT.md0.4 KB
- README.md0.8 KB
- Tooltips/ayman-ashine_terrible-puma-8.html1.9 KB
Origin and licence
Modified by PalateKit
- Author
- ayman-ashine
- Source
- github.com/uiverse-io/galaxy/tree/adbd2adde0a299a3956ea288fb444ec01891ca41/Tooltips/ayman-ashine_terrible-puma-8.html
- Licence
- MIT
Notice
Version modifiée de « ayman-ashine_terrible-puma-8 » (ayman-ashine, MIT) : traduction française et fiche par PalateKit.
User reviews
–
No ratings yet
Loading reviews…
Frequently asked questions
How do I add it to my site?
Copy the HTML into your page. Styling relies on Tailwind CSS classes, so your project must already use Tailwind.
How do I customise it?
Edit: colours are Tailwind classes (bg-zinc-800, text-zinc-400, bg-zinc-300) to swap; pick the position by keeping one of the four blocks. To respect visitors sensitive to motion, wrap the animations in an @media (prefers-reduced-motion: no-preference) rule.