Tooltip
Small pop-up that appears on hover. Powered by Popover with Floating UI.
TailwindCSS
Vanilla JS
Add to cart
package showcase
import (
"github.com/axzilla/templui/internal/components/button"
"github.com/axzilla/templui/internal/components/tooltip"
)
templ TooltipDefault() {
@tooltip.Tooltip() {
@tooltip.Trigger(tooltip.TriggerProps{
For: "tooltip-default",
}) {
@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 tooltipCopy and paste the following code into your project:
package tooltip import ( "github.com/axzilla/templui/internal/components/popover" "github.com/axzilla/templui/internal/utils" ) type Position string const ( PositionTop Position = "top" PositionRight Position = "right" PositionBottom Position = "bottom" PositionLeft Position = "left" ) // Map tooltip positions to popover positions func mapTooltipPositionToPopover(position Position) popover.Placement { switch position { case PositionTop: return popover.PlacementTop case PositionRight: return popover.PlacementRight case PositionBottom: return popover.PlacementBottom case PositionLeft: return popover.PlacementLeft default: return popover.PlacementTop } } type Props struct { ID string Class string Attributes templ.Attributes } type TriggerProps struct { ID string Class string Attributes templ.Attributes For string } type ContentProps struct { ID string Class string Attributes templ.Attributes ShowArrow bool Position Position HoverDelay int HoverOutDelay int } templ Tooltip(props ...Props) { @popover.Popover() { { children... } } } templ Trigger(props ...TriggerProps) { {{ var p TriggerProps }} if len(props) > 0 { {{ p = props[0] }} } @popover.Trigger(popover.TriggerProps{ ID: p.ID, TriggerType: popover.TriggerTypeHover, For: p.For, }) { { children... } } } templ Content(props ...ContentProps) { {{ var p ContentProps }} if len(props) > 0 { {{ p = props[0] }} } @popover.Content(popover.ContentProps{ ID: p.ID, Class: utils.TwMerge("px-4 py-1 bg-foreground text-background border-foreground", p.Class), Attributes: p.Attributes, Placement: mapTooltipPositionToPopover(p.Position), ShowArrow: p.ShowArrow, HoverDelay: p.HoverDelay, HoverOutDelay: p.HoverOutDelay, }) { { children... } } }Update the import paths to match your project setup.
Examples
Positions
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
package showcase
import (
"github.com/axzilla/templui/internal/components/button"
"github.com/axzilla/templui/internal/components/tooltip"
)
templ TooltipPositions() {
<div class="flex gap-2">
@tooltip.Tooltip() {
@tooltip.Trigger(tooltip.TriggerProps{
For: "top-tooltip",
}) {
@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{
For: "right-tooltip",
}) {
@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{
For: "bottom-tooltip",
}) {
@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{
For: "left-tooltip",
}) {
@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>
}