Tooltip Component - Goshtoso UI Library for Go

Informative text shown on hover, focus, or click. Four positions (top, bottom, left, right), optional rich description, and hover or click triggers.

Usage Example

@tooltip.Tooltip(tooltip.Config{
    ID:          "myTooltip",
    Label:        "Tooltip top",
    Position:    tooltip.Top,
    TriggerLabel: "Top",
})

With Description

Add a Description for a richer two-line tooltip.

With Description

@tooltip.Tooltip(tooltip.Config{
    ID:          "richTooltip",
    Label:        "Tooltip top",
    Description: "A rich tooltip with longer text.",
    TriggerLabel: "Hover Me",
})

Click Trigger

Set TriggerMode: tooltip.Click to toggle the tooltip on click instead of hover.

Click Trigger

@tooltip.Tooltip(tooltip.Config{
    ID:          "clickTooltip",
    Label:        "Tooltip top",
    TriggerMode: tooltip.Click,
    TriggerLabel: "Click Me",
})

API Reference

Prop	Type	Default	Description
`ID`	`string`	`""`	Unique id (wires the trigger to the tooltip for accessibility).
`Label`	`string`	`""`	Tooltip text (heading line).
`Description`	`string`	`""`	Optional secondary line for a rich tooltip.
`Position`	`Position`	`Top`	Placement: "top", "bottom", "left", "right".
`TriggerMode`	`Trigger`	`Hover`	Activation: "hover" (hover/focus) or "click".
`TriggerLabel`	`string`	`""`	Label of the trigger element.
`Trigger`	`templ.Component`	`nil`	Custom trigger content (overrides TriggerLabel).

Steps Breadcrumbs