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 tooltipExamples
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>
}