Modal, Tooltip & Accordion Components
A native <dialog> modal, a CSS-only tooltip and a <details> accordion — lightweight overlay components in the base style and 10 design aesthetics.
33 components · live preview · copy as HTML or JSX · free for commercial use
Base overlays (3)
Accordion / FAQ Item
Overlays
What is your refund policy? ▾
We offer a 30-day money-back guarantee on all plans, no questions asked.
Uses the native <details>/<summary> elements — no JavaScript required.
<details class="max-w-md rounded-xl border border-slate-200 p-4 group">
<summary class="cursor-pointer text-sm font-semibold text-slate-800 list-none flex items-center justify-between">
What is your refund policy?
<span class="text-slate-400 group-open:rotate-180 transition-transform">▾</span>
</summary>
<p class="text-sm text-slate-500 mt-2">
We offer a 30-day money-back guarantee on all plans, no questions asked.
</p>
</details>Modal Dialog
Overlays
Uses the native <dialog> element — minimal JavaScript just toggles it open/closed.
<button id="modal-open" class="px-4 py-2 rounded-xl bg-indigo-600 text-white text-sm font-semibold hover:bg-indigo-700 transition-colors">
Open Modal
</button>
<dialog id="modal" class="rounded-2xl p-6 w-full max-w-sm backdrop:bg-black/50">
<h3 class="text-base font-bold text-slate-900 mb-2">Confirm action</h3>
<p class="text-sm text-slate-500 mb-4">Are you sure you want to continue?</p>
<div class="flex gap-2 justify-end">
<button id="modal-close" class="px-3 py-1.5 rounded-lg text-sm font-semibold text-slate-600 hover:bg-slate-100">Cancel</button>
<button class="px-3 py-1.5 rounded-lg text-sm font-semibold text-white bg-indigo-600 hover:bg-indigo-700">Confirm</button>
</div>
</dialog>Tooltip
Overlays
Uses Tailwind's group/group-hover variants — no JavaScript required.
<span class="relative inline-block group">
<button class="w-8 h-8 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 text-sm font-bold">?</button>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap rounded-lg bg-slate-900 text-white text-xs px-2.5 py-1.5">
Helpful tooltip text
</span>
</span>Minimal overlays
Accordion / FAQ Item
Minimal · Overlays
Refund policy? ▾
30-day money-back guarantee, no questions asked.
Uses the native <details>/<summary> elements — no JavaScript required.
<details class="w-48 rounded-lg border border-slate-200 bg-white p-4 group">
<summary class="cursor-pointer text-sm font-semibold text-slate-900 list-none flex items-center justify-between">
Refund policy?
<span class="text-slate-500 group-open:rotate-180 transition-transform">▾</span>
</summary>
<p class="text-xs text-slate-500 mt-2">30-day money-back guarantee, no questions asked.</p>
</details>Modal Dialog
Minimal · Overlays
Uses the native <dialog> element — minimal JavaScript just toggles it open/closed.
<button id="modal-open" class="bg-slate-900 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-slate-800 transition-all">
Open Modal
</button>
<dialog id="modal" class="rounded-lg p-6 w-full max-w-xs bg-white border border-slate-200 text-slate-900 backdrop:bg-black/50">
<h3 class="text-sm font-semibold mb-2">Confirm action</h3>
<p class="text-xs text-slate-500 mb-4">Are you sure you want to continue?</p>
<div class="flex gap-2 justify-end">
<button id="modal-close" class="px-3 py-1.5 rounded-lg text-xs font-medium text-slate-500">Cancel</button>
<button class="px-3 py-1.5 rounded-lg text-xs font-semibold bg-slate-900 text-white">Confirm</button>
</div>
</dialog>Tooltip
Minimal · Overlays
Uses Tailwind's group/group-hover variants — no JavaScript required.
<span class="relative inline-block group">
<button class="w-8 h-8 flex items-center justify-center rounded-full bg-white border border-slate-200 text-slate-900 text-xs font-semibold">?</button>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap rounded-lg bg-slate-900 text-white text-[10px] px-2.5 py-1.5">
Helpful tooltip text
</span>
</span>Neumorphism overlays
Accordion / FAQ Item
Neumorphism · Overlays
Refund policy? ▾
30-day money-back guarantee, no questions asked.
Uses the native <details>/<summary> elements — no JavaScript required.
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<details class="w-48 rounded-xl bg-[#e0e5ec] p-4 group">
<summary class="cursor-pointer text-sm font-bold text-slate-600 list-none flex items-center justify-between">
Refund policy?
<span class="text-slate-500 group-open:rotate-180 transition-transform">▾</span>
</summary>
<p class="text-xs text-slate-500 mt-2">30-day money-back guarantee, no questions asked.</p>
</details>
</div>Modal Dialog
Neumorphism · Overlays
Uses the native <dialog> element — minimal JavaScript just toggles it open/closed.
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<button id="modal-open" class="bg-[#e0e5ec] text-slate-600 rounded-xl px-4 py-2 text-sm font-bold hover:shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff] transition-all">
Open Modal
</button>
<dialog id="modal" class="rounded-xl p-6 w-full max-w-xs bg-[#e0e5ec] text-slate-600 backdrop:bg-black/50">
<h3 class="text-sm font-bold mb-2">Confirm action</h3>
<p class="text-xs text-slate-500 mb-4">Are you sure you want to continue?</p>
<div class="flex gap-2 justify-end">
<button id="modal-close" class="px-3 py-1.5 rounded-xl text-xs font-semibold text-slate-500">Cancel</button>
<button class="px-3 py-1.5 rounded-xl text-xs font-bold bg-[#e0e5ec] text-slate-600">Confirm</button>
</div>
</dialog>
</div>Tooltip
Neumorphism · Overlays
Uses Tailwind's group/group-hover variants — no JavaScript required.
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<span class="relative inline-block group">
<button class="w-8 h-8 flex items-center justify-center rounded-full bg-[#e0e5ec] text-slate-600 text-xs font-bold">?</button>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap rounded-xl bg-slate-700 text-white text-[10px] px-2.5 py-1.5">
Helpful tooltip text
</span>
</span>
</div>Glassmorphism overlays
Accordion / FAQ Item
Glassmorphism · Overlays
Refund policy? ▾
30-day money-back guarantee, no questions asked.
Uses the native <details>/<summary> elements — no JavaScript required.
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<details class="w-48 rounded-xl border border-white/30 bg-white/20 backdrop-blur-md p-4 group">
<summary class="cursor-pointer text-sm font-bold text-white list-none flex items-center justify-between">
Refund policy?
<span class="text-white/80 group-open:rotate-180 transition-transform">▾</span>
</summary>
<p class="text-xs text-white/80 mt-2">30-day money-back guarantee, no questions asked.</p>
</details>
</div>Modal Dialog
Glassmorphism · Overlays
Uses the native <dialog> element — minimal JavaScript just toggles it open/closed.
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<button id="modal-open" class="bg-white/20 backdrop-blur-md text-white rounded-xl px-4 py-2 text-sm font-bold hover:bg-white/30 transition-all">
Open Modal
</button>
<dialog id="modal" class="rounded-xl p-6 w-full max-w-xs bg-white/20 backdrop-blur-md border border-white/30 text-white backdrop:bg-black/50">
<h3 class="text-sm font-bold mb-2">Confirm action</h3>
<p class="text-xs text-white/80 mb-4">Are you sure you want to continue?</p>
<div class="flex gap-2 justify-end">
<button id="modal-close" class="px-3 py-1.5 rounded-xl text-xs font-semibold text-white/80">Cancel</button>
<button class="px-3 py-1.5 rounded-xl text-xs font-bold bg-white/20 backdrop-blur-md text-white">Confirm</button>
</div>
</dialog>
</div>Tooltip
Glassmorphism · Overlays
Uses Tailwind's group/group-hover variants — no JavaScript required.
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<span class="relative inline-block group">
<button class="w-8 h-8 flex items-center justify-center rounded-full bg-white/20 backdrop-blur-md border border-white/30 text-white text-xs font-bold">?</button>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap rounded-xl bg-white/20 backdrop-blur-md border border-white/30 text-white text-[10px] px-2.5 py-1.5">
Helpful tooltip text
</span>
</span>
</div>Neubrutalism overlays
Accordion / FAQ Item
Neubrutalism · Overlays
Refund policy? ▾
30-day money-back guarantee, no questions asked.
Uses the native <details>/<summary> elements — no JavaScript required.
<details class="w-48 rounded-none border-[3px] border-black bg-white p-4 group">
<summary class="cursor-pointer text-sm font-black text-black list-none flex items-center justify-between">
Refund policy?
<span class="text-slate-700 group-open:rotate-180 transition-transform">▾</span>
</summary>
<p class="text-xs text-slate-700 mt-2">30-day money-back guarantee, no questions asked.</p>
</details>Modal Dialog
Neubrutalism · Overlays
Uses the native <dialog> element — minimal JavaScript just toggles it open/closed.
<button id="modal-open" class="bg-yellow-300 text-black rounded-none px-4 py-2 text-sm font-black hover:shadow-[2px_2px_0px_#000] hover:translate-x-[2px] hover:translate-y-[2px] transition-all">
Open Modal
</button>
<dialog id="modal" class="rounded-none p-6 w-full max-w-xs bg-white border-[3px] border-black text-black backdrop:bg-black/50">
<h3 class="text-sm font-black mb-2">Confirm action</h3>
<p class="text-xs text-slate-700 mb-4">Are you sure you want to continue?</p>
<div class="flex gap-2 justify-end">
<button id="modal-close" class="px-3 py-1.5 rounded-none text-xs font-black text-slate-700">Cancel</button>
<button class="px-3 py-1.5 rounded-none text-xs font-black bg-yellow-300 text-black">Confirm</button>
</div>
</dialog>Tooltip
Neubrutalism · Overlays
Uses Tailwind's group/group-hover variants — no JavaScript required.
<span class="relative inline-block group">
<button class="w-8 h-8 flex items-center justify-center rounded-none bg-white border-[3px] border-black text-black text-xs font-black">?</button>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap rounded-none bg-yellow-300 border-2 border-black text-black text-[10px] px-2.5 py-1.5">
Helpful tooltip text
</span>
</span>Material overlays
Accordion / FAQ Item
Material · Overlays
Refund policy? ▾
30-day money-back guarantee, no questions asked.
Uses the native <details>/<summary> elements — no JavaScript required.
<details class="w-48 rounded-lg bg-white p-4 group">
<summary class="cursor-pointer text-sm font-medium text-slate-900 list-none flex items-center justify-between">
Refund policy?
<span class="text-slate-500 group-open:rotate-180 transition-transform">▾</span>
</summary>
<p class="text-xs text-slate-500 mt-2">30-day money-back guarantee, no questions asked.</p>
</details>Modal Dialog
Material · Overlays
Uses the native <dialog> element — minimal JavaScript just toggles it open/closed.
<button id="modal-open" class="bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-medium hover:shadow-lg transition-all">
Open Modal
</button>
<dialog id="modal" class="rounded-lg p-6 w-full max-w-xs bg-white text-slate-900 backdrop:bg-black/50">
<h3 class="text-sm font-medium mb-2">Confirm action</h3>
<p class="text-xs text-slate-500 mb-4">Are you sure you want to continue?</p>
<div class="flex gap-2 justify-end">
<button id="modal-close" class="px-3 py-1.5 rounded-lg text-xs font-medium text-slate-500">Cancel</button>
<button class="px-3 py-1.5 rounded-lg text-xs font-medium bg-blue-600 text-white">Confirm</button>
</div>
</dialog>Tooltip
Material · Overlays
Uses Tailwind's group/group-hover variants — no JavaScript required.
<span class="relative inline-block group">
<button class="w-8 h-8 flex items-center justify-center rounded-full bg-white text-slate-900 text-xs font-medium">?</button>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap rounded-lg bg-slate-800 text-white text-[10px] px-2.5 py-1.5">
Helpful tooltip text
</span>
</span>Gradient overlays
Accordion / FAQ Item
Gradient · Overlays
Refund policy? ▾
30-day money-back guarantee, no questions asked.
Uses the native <details>/<summary> elements — no JavaScript required.
<details class="w-48 rounded-xl bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500 p-4 group">
<summary class="cursor-pointer text-sm font-bold text-white list-none flex items-center justify-between">
Refund policy?
<span class="text-white/80 group-open:rotate-180 transition-transform">▾</span>
</summary>
<p class="text-xs text-white/80 mt-2">30-day money-back guarantee, no questions asked.</p>
</details>Modal Dialog
Gradient · Overlays
Uses the native <dialog> element — minimal JavaScript just toggles it open/closed.
<button id="modal-open" class="bg-gradient-to-r from-fuchsia-500 via-purple-500 to-indigo-500 text-white rounded-xl px-4 py-2 text-sm font-bold hover:scale-105 transition-all">
Open Modal
</button>
<dialog id="modal" class="rounded-xl p-6 w-full max-w-xs bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500 text-white backdrop:bg-black/50">
<h3 class="text-sm font-bold mb-2">Confirm action</h3>
<p class="text-xs text-white/80 mb-4">Are you sure you want to continue?</p>
<div class="flex gap-2 justify-end">
<button id="modal-close" class="px-3 py-1.5 rounded-xl text-xs font-bold text-white/80">Cancel</button>
<button class="px-3 py-1.5 rounded-xl text-xs font-bold bg-gradient-to-r from-fuchsia-500 via-purple-500 to-indigo-500 text-white">Confirm</button>
</div>
</dialog>Tooltip
Gradient · Overlays
Uses Tailwind's group/group-hover variants — no JavaScript required.
<span class="relative inline-block group">
<button class="w-8 h-8 flex items-center justify-center rounded-full bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500 text-white text-xs font-bold">?</button>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap rounded-xl bg-gradient-to-r from-fuchsia-500 to-indigo-500 text-white text-[10px] px-2.5 py-1.5">
Helpful tooltip text
</span>
</span>Cyberpunk overlays
Accordion / FAQ Item
Cyberpunk · Overlays
Refund policy? ▾
30-day money-back guarantee, no questions asked.
Uses the native <details>/<summary> elements — no JavaScript required.
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<details class="w-48 rounded-lg border border-cyan-400 bg-slate-900 p-4 group">
<summary class="cursor-pointer text-sm font-bold text-cyan-300 list-none flex items-center justify-between">
Refund policy?
<span class="text-cyan-300/70 group-open:rotate-180 transition-transform">▾</span>
</summary>
<p class="text-xs text-cyan-300/70 mt-2">30-day money-back guarantee, no questions asked.</p>
</details>
</div>Modal Dialog
Cyberpunk · Overlays
Uses the native <dialog> element — minimal JavaScript just toggles it open/closed.
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<button id="modal-open" class="bg-slate-900 text-cyan-400 rounded-lg px-4 py-2 text-sm font-bold hover:shadow-[0_0_25px_rgba(34,211,238,0.9)] transition-all">
Open Modal
</button>
<dialog id="modal" class="rounded-lg p-6 w-full max-w-xs bg-slate-900 border border-cyan-400 text-cyan-300 backdrop:bg-black/50">
<h3 class="text-sm font-bold mb-2">Confirm action</h3>
<p class="text-xs text-cyan-300/70 mb-4">Are you sure you want to continue?</p>
<div class="flex gap-2 justify-end">
<button id="modal-close" class="px-3 py-1.5 rounded-lg text-xs font-semibold text-cyan-300/70">Cancel</button>
<button class="px-3 py-1.5 rounded-lg text-xs font-bold bg-slate-900 text-cyan-400">Confirm</button>
</div>
</dialog>
</div>Tooltip
Cyberpunk · Overlays
Uses Tailwind's group/group-hover variants — no JavaScript required.
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<span class="relative inline-block group">
<button class="w-8 h-8 flex items-center justify-center rounded-lg bg-slate-900 border border-cyan-400 text-cyan-300 text-xs font-bold">?</button>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap rounded-lg bg-slate-900 border border-cyan-400 text-cyan-300 text-[10px] px-2.5 py-1.5">
Helpful tooltip text
</span>
</span>
</div>Retro overlays
Accordion / FAQ Item
Retro · Overlays
Refund policy? ▾
30-day money-back guarantee, no questions asked.
Uses the native <details>/<summary> elements — no JavaScript required.
<details class="w-48 rounded-2xl border-4 border-orange-400 bg-orange-100 p-4 group">
<summary class="cursor-pointer text-sm font-black text-orange-700 list-none flex items-center justify-between">
Refund policy?
<span class="text-orange-600 group-open:rotate-180 transition-transform">▾</span>
</summary>
<p class="text-xs text-orange-600 mt-2">30-day money-back guarantee, no questions asked.</p>
</details>Modal Dialog
Retro · Overlays
Uses the native <dialog> element — minimal JavaScript just toggles it open/closed.
<button id="modal-open" class="bg-gradient-to-b from-lime-300 to-lime-500 text-slate-900 rounded-2xl px-4 py-2 text-sm font-black active:translate-y-1 active:shadow-none transition-all">
Open Modal
</button>
<dialog id="modal" class="rounded-2xl p-6 w-full max-w-xs bg-orange-100 border-4 border-orange-400 text-orange-700 backdrop:bg-black/50">
<h3 class="text-sm font-black mb-2">Confirm action</h3>
<p class="text-xs text-orange-600 mb-4">Are you sure you want to continue?</p>
<div class="flex gap-2 justify-end">
<button id="modal-close" class="px-3 py-1.5 rounded-2xl text-xs font-extrabold text-orange-600">Cancel</button>
<button class="px-3 py-1.5 rounded-2xl text-xs font-black bg-gradient-to-b from-lime-300 to-lime-500 text-slate-900">Confirm</button>
</div>
</dialog>Tooltip
Retro · Overlays
Uses Tailwind's group/group-hover variants — no JavaScript required.
<span class="relative inline-block group">
<button class="w-8 h-8 flex items-center justify-center rounded-full bg-orange-100 border-4 border-orange-400 text-orange-700 text-xs font-black">?</button>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap rounded-2xl bg-orange-400 border-2 border-orange-600 text-white text-[10px] px-2.5 py-1.5">
Helpful tooltip text
</span>
</span>Corporate overlays
Accordion / FAQ Item
Corporate · Overlays
Refund policy? ▾
30-day money-back guarantee, no questions asked.
Uses the native <details>/<summary> elements — no JavaScript required.
<details class="w-48 rounded-md border border-slate-200 bg-white p-4 group">
<summary class="cursor-pointer text-sm font-semibold text-slate-800 list-none flex items-center justify-between">
Refund policy?
<span class="text-slate-500 group-open:rotate-180 transition-transform">▾</span>
</summary>
<p class="text-xs text-slate-500 mt-2">30-day money-back guarantee, no questions asked.</p>
</details>Modal Dialog
Corporate · Overlays
Uses the native <dialog> element — minimal JavaScript just toggles it open/closed.
<button id="modal-open" class="bg-slate-800 text-white rounded-md px-4 py-2 text-sm font-semibold hover:bg-slate-700 transition-all">
Open Modal
</button>
<dialog id="modal" class="rounded-md p-6 w-full max-w-xs bg-white border border-slate-200 text-slate-800 backdrop:bg-black/50">
<h3 class="text-sm font-semibold mb-2">Confirm action</h3>
<p class="text-xs text-slate-500 mb-4">Are you sure you want to continue?</p>
<div class="flex gap-2 justify-end">
<button id="modal-close" class="px-3 py-1.5 rounded-md text-xs font-semibold text-slate-500">Cancel</button>
<button class="px-3 py-1.5 rounded-md text-xs font-semibold bg-slate-800 text-white">Confirm</button>
</div>
</dialog>Tooltip
Corporate · Overlays
Uses Tailwind's group/group-hover variants — no JavaScript required.
<span class="relative inline-block group">
<button class="w-8 h-8 flex items-center justify-center rounded-md bg-white border border-slate-200 text-slate-800 text-xs font-semibold">?</button>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap rounded-md bg-slate-800 text-white text-[10px] px-2.5 py-1.5">
Helpful tooltip text
</span>
</span>Playful overlays
Accordion / FAQ Item
Playful · Overlays
Refund policy? ▾
30-day money-back guarantee, no questions asked.
Uses the native <details>/<summary> elements — no JavaScript required.
<details class="w-48 rounded-3xl border-2 border-yellow-200 bg-yellow-50 p-4 group">
<summary class="cursor-pointer text-sm font-bold text-yellow-800 list-none flex items-center justify-between">
Refund policy?
<span class="text-yellow-700 group-open:rotate-180 transition-transform">▾</span>
</summary>
<p class="text-xs text-yellow-700 mt-2">30-day money-back guarantee, no questions asked.</p>
</details>Modal Dialog
Playful · Overlays
Uses the native <dialog> element — minimal JavaScript just toggles it open/closed.
<button id="modal-open" class="bg-pink-200 text-pink-900 rounded-3xl px-4 py-2 text-sm font-bold hover:bg-pink-300 transition-all">
Open Modal
</button>
<dialog id="modal" class="rounded-3xl p-6 w-full max-w-xs bg-yellow-50 border-2 border-yellow-200 text-yellow-800 backdrop:bg-black/50">
<h3 class="text-sm font-bold mb-2">Confirm action</h3>
<p class="text-xs text-yellow-700 mb-4">Are you sure you want to continue?</p>
<div class="flex gap-2 justify-end">
<button id="modal-close" class="px-3 py-1.5 rounded-3xl text-xs font-bold text-yellow-700">Cancel</button>
<button class="px-3 py-1.5 rounded-3xl text-xs font-bold bg-pink-200 text-pink-900">Confirm</button>
</div>
</dialog>Tooltip
Playful · Overlays
Uses Tailwind's group/group-hover variants — no JavaScript required.
<span class="relative inline-block group">
<button class="w-8 h-8 flex items-center justify-center rounded-full bg-yellow-50 border-2 border-yellow-200 text-yellow-800 text-xs font-bold">?</button>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap rounded-3xl bg-teal-500 text-white text-[10px] px-2.5 py-1.5">
Helpful tooltip text
</span>
</span>Native elements first
The modal is built on the HTML <dialog> element. Calling showModal() opens it in the browser's top layer, keeps focus inside it, closes it with the Escape key and adds a ::backdrop you can style — features that used to require a JavaScript library. The accordion uses <details> and <summary>, so it expands and collapses with no JavaScript at all and doubles as a ready-made FAQ item.
The tooltip uses Tailwind's group and group-hover variants to reveal a label above its trigger, which makes it a good fit for short hints on icon buttons.
Accessibility tips
Reserve modals for decisions that must interrupt the user; for anything else an inline panel is less disruptive. Give the dialog a heading and a clear close button. Hover-only tooltips are invisible to keyboard and touch users, so also reveal them on focus (add group-focus-within:block) and never put essential information only in a tooltip.
Frequently Asked Questions
How do I open a modal without a JavaScript library?↓
Use the native <dialog> element: call dialog.showModal() from a button's click handler and dialog.close() to dismiss it. The browser handles focus, the Escape key and the backdrop.
How do I build an accordion with no JavaScript?↓
Use <details> with a <summary> for the clickable heading. The browser toggles the open state for you, and Tailwind's open: variant lets you style the expanded state.
Are CSS-only tooltips accessible?↓
Only partly. Hover tooltips do not appear for keyboard or touch users, so show them on focus as well and keep critical information out of tooltips.
Last updated: