Ship faster with goilerplate • Get it now for $99 instead of $199

Tooltip

Small pop-up that appears on hover. Powered by Popover with Floating UI.

Source Tailwind CSS JavaScript

Installation

templui add tooltip

Load the script once in your layout:

<head> @tooltip.Script() </head>

Examples

Side

With Keyboard Shortcut

Disabled Button

API Reference

Required parameter
Hover for description

Tooltip

Root wrapper component for tooltip functionality.

Name Type Default
 
ID

Unique identifier for the tooltip wrapper.

 
string
 -
Class

Additional CSS classes to apply to the tooltip wrapper.

 
string
 -
Attributes

Additional HTML attributes to apply to the tooltip wrapper.

 
templ.Attributes
 -

Make any element the trigger by spreading tooltip.Trigger() onto its Attributes — the templ equivalent of shadcn's asChild.

Content

Container for the tooltip content with positioning options.

Name Type Default
 
ID

Optional HTML id for the content element.

 
string
 -
Class

Additional CSS classes to apply to the content. Default styling includes dark background.

 
string
 -
Attributes

Additional HTML attributes to apply to the content element.

 
templ.Attributes
 -
ShowArrow

Whether to show an arrow pointing to the trigger element.

 
bool
 
false
Position

Position of the tooltip relative to trigger. Options: 'top', 'right', 'bottom', 'left'.

 
Position
 
top
HoverDelay

Delay in milliseconds before showing the tooltip on hover.

 
int
 
0
HoverOutDelay

Delay in milliseconds before hiding the tooltip on hover out.

 
int
 
0