Tooltip
Small pop-up that appears on hover. Powered by Popover with Floating UI.
package showcase
import (
"github.com/templui/templui/components/button"
"github.com/templui/templui/components/tooltip"
)
templ TooltipDefault() {
@tooltip.Tooltip() {
@tooltip.Trigger(tooltip.TriggerProps{}) {
@button.Button(button.Props{
Variant: button.VariantOutline,
}) {
Hover Me
}
}
@tooltip.Content(tooltip.ContentProps{
ID: "tooltip-default",
Position: tooltip.PositionTop,
HoverDelay: 500,
HoverOutDelay: 100,
}) {
Add to cart
}
}
}
Installation
templui add tooltipLoad the script once in your layout:
<head>
@tooltip.Script()
</head>import "github.com/templui/templui/components/tooltip"Load the script once in your layout:
<head>
@tooltip.Script()
</head>Examples
Positions
package showcase
import (
"github.com/templui/templui/components/button"
"github.com/templui/templui/components/tooltip"
)
templ TooltipPositions() {
<div class="flex gap-2">
@tooltip.Tooltip() {
@tooltip.Trigger(tooltip.TriggerProps{}) {
@button.Button(button.Props{
Variant: button.VariantOutline,
}) {
Top
}
}
@tooltip.Content(tooltip.ContentProps{
ID: "top-tooltip",
Position: tooltip.PositionTop,
ShowArrow: true,
HoverDelay: 500,
HoverOutDelay: 100,
}) {
Tooltip on top
}
}
@tooltip.Tooltip() {
@tooltip.Trigger(tooltip.TriggerProps{}) {
@button.Button(button.Props{
Variant: button.VariantOutline,
}) {
Right
}
}
@tooltip.Content(tooltip.ContentProps{
ID: "right-tooltip",
Position: tooltip.PositionRight,
ShowArrow: true,
HoverDelay: 500,
HoverOutDelay: 100,
}) {
Tooltip on right
}
}
@tooltip.Tooltip() {
@tooltip.Trigger(tooltip.TriggerProps{}) {
@button.Button(button.Props{
Variant: button.VariantOutline,
}) {
Bottom
}
}
@tooltip.Content(tooltip.ContentProps{
ID: "bottom-tooltip",
Position: tooltip.PositionBottom,
ShowArrow: true,
HoverDelay: 500,
HoverOutDelay: 100,
}) {
Tooltip on bottom
}
}
@tooltip.Tooltip() {
@tooltip.Trigger(tooltip.TriggerProps{}) {
@button.Button(button.Props{
Variant: button.VariantOutline,
}) {
Left
}
}
@tooltip.Content(tooltip.ContentProps{
ID: "left-tooltip",
Position: tooltip.PositionLeft,
ShowArrow: true,
HoverDelay: 500,
HoverOutDelay: 100,
}) {
Tooltip on left
}
}
</div>
}
API Reference
Tooltip
Root wrapper component for tooltip functionality.
| Name | Type | Default |
|---|---|---|
Unique identifier for the tooltip wrapper. | | - |
Additional CSS classes to apply to the tooltip wrapper. | | - |
Additional HTML attributes to apply to the tooltip wrapper. | | - |
Trigger
Element that triggers the tooltip on hover.
| Name | Type | Default |
|---|---|---|
Unique identifier for the trigger element. | | - |
Additional CSS classes to apply to the trigger. | | - |
Additional HTML attributes to apply to the trigger element. | | - |
Content
Container for the tooltip content with positioning options.
| Name | Type | Default |
|---|---|---|
Optional HTML id for the content element. | | - |
Additional CSS classes to apply to the content. Default styling includes dark background. | | - |
Additional HTML attributes to apply to the content element. | | - |
Whether to show an arrow pointing to the trigger element. | | |
Position of the tooltip relative to trigger. Options: 'top', 'right', 'bottom', 'left'. | | |
Delay in milliseconds before showing the tooltip on hover. | | |
Delay in milliseconds before hiding the tooltip on hover out. | | |
