Tailwind Tools:
Button Generator
Table Tool
Modal Generator
Cards
Alerts
Progress
More
▼
Dropdown
Accordion
Popover
Tooltips
Pagination
Badges
Breadcrumbs
Text Maker
Link Maker
☰
Button Generator
Table Tool
Cards
Alerts
Progress
More
▼
Pagination
Dropdown
Badges
Breadcrumbs
Text Maker
Link Maker
Tailwind Tooltips Maker
Create beautiful, customizable tooltips with Tailwind CSS
Tooltip Options
Tooltip Type
Choose the type of tooltip
Basic
Custom Content
Trigger Element
Element that triggers the tooltip
Button
Link
Custom Element
Tooltip Title (optional)
Add an optional title to your tooltip
Tooltip Content
Main content for your tooltip
Allow HTML in content
Trigger Text
Text for the trigger element
Placement
Position of the tooltip
Top
Bottom
Left
Right
Trigger Event
Event that triggers the tooltip
Hover
Click
Focus
Delay (ms)
Delay before showing tooltip
0ms
200ms
1000ms
Styling Options
Animation
Border
Shadow
Rounded Corners
Width
Auto
Small (8rem)
Medium (12rem)
Large (16rem)
Extra Large (20rem)
Text Color
White
Black
Lightest Gray
Lighter Gray
Light Gray
Gray
Dark Gray
Darker Gray
Lightest Red
Lighter Red
Light Red
Red
Dark Red
Darker Red
Lightest Orange
Lighter Orange
Light Orange
Orange
Dark Orange
Darker Orange
Lightest Amber
Lighter Amber
Light Amber
Amber
Dark Amber
Darker Amber
Lightest Yellow
Lighter Yellow
Light Yellow
Yellow
Dark Yellow
Darker Yellow
Lightest Lime
Lighter Lime
Light Lime
Lime
Dark Lime
Darker Lime
Lightest Green
Lighter Green
Light Green
Green
Dark Green
Darker Green
Lightest Emerald
Lighter Emerald
Light Emerald
Emerald
Dark Emerald
Darker Emerald
Lightest Teal
Lighter Teal
Light Teal
Teal
Dark Teal
Darker Teal
Lightest Cyan
Lighter Cyan
Light Cyan
Cyan
Dark Cyan
Darker Cyan
Lightest Sky
Lighter Sky
Light Sky
Sky
Dark Sky
Darker Sky
Lightest Blue
Lighter Blue
Light Blue
Blue
Dark Blue
Darker Blue
Lightest Indigo
Lighter Indigo
Light Indigo
Indigo
Dark Indigo
Darker Indigo
Lightest Violet
Lighter Violet
Light Violet
Violet
Dark Violet
Darker Violet
Lightest Purple
Lighter Purple
Light Purple
Purple
Dark Purple
Darker Purple
Lightest Fuchsia
Lighter Fuchsia
Light Fuchsia
Fuchsia
Dark Fuchsia
Darker Fuchsia
Lightest Pink
Lighter Pink
Light Pink
Pink
Dark Pink
Darker Pink
Lightest Rose
Lighter Rose
Light Rose
Rose
Dark Rose
Darker Rose
Background Color
Dark (Gray)
Indigo
Blue
Green
Red
Purple
Pink
Lightest Gray
Lighter Gray
Light Gray
Gray
Dark Gray
Darker Gray
Lightest Red
Lighter Red
Light Red
Red
Dark Red
Darker Red
Lightest Orange
Lighter Orange
Light Orange
Orange
Dark Orange
Darker Orange
Lightest Amber
Lighter Amber
Light Amber
Amber
Dark Amber
Darker Amber
Lightest Yellow
Lighter Yellow
Light Yellow
Yellow
Dark Yellow
Darker Yellow
Lightest Lime
Lighter Lime
Light Lime
Lime
Dark Lime
Darker Lime
Lightest Green
Lighter Green
Light Green
Green
Dark Green
Darker Green
Lightest Emerald
Lighter Emerald
Light Emerald
Emerald
Dark Emerald
Darker Emerald
Lightest Teal
Lighter Teal
Light Teal
Teal
Dark Teal
Darker Teal
Lightest Cyan
Lighter Cyan
Light Cyan
Cyan
Dark Cyan
Darker Cyan
Lightest Sky
Lighter Sky
Light Sky
Sky
Dark Sky
Darker Sky
Lightest Blue
Lighter Blue
Light Blue
Blue
Dark Blue
Darker Blue
Lightest Indigo
Lighter Indigo
Light Indigo
Indigo
Dark Indigo
Darker Indigo
Lightest Violet
Lighter Violet
Light Violet
Violet
Dark Violet
Darker Violet
Lightest Purple
Lighter Purple
Light Purple
Purple
Dark Purple
Darker Purple
Lightest Fuchsia
Lighter Fuchsia
Light Fuchsia
Fuchsia
Dark Fuchsia
Darker Fuchsia
Lightest Pink
Lighter Pink
Light Pink
Pink
Dark Pink
Darker Pink
Lightest Rose
Lighter Rose
Light Rose
Rose
Dark Rose
Darker Rose
Show Arrow
Accessibility Attributes
Live Preview
Generated Code
Copy Code
Code copied to clipboard!