Tooltip

View Original

A tooltip displays informative text when users hover over, focus on, or click an element. Useful for providing additional context without cluttering the interface.

Goshtoso Component

Go + Templ

Default Tooltip (Hover)

Tooltip with Description

Click Tooltip

Usage Example

// Simple Tooltip (top, hover)
@tooltip.Tooltip(tooltip.Config{
    ID:          "myTooltip",
    Text:        "Tooltip top",
    TriggerText: "Hover Me",
})

// Tooltip with position
@tooltip.Tooltip(tooltip.Config{
    ID:          "bottomTooltip",
    Text:        "Tooltip bottom",
    Position:    tooltip.Bottom,
    TriggerText: "Hover Me",
})

// Rich tooltip with description
@tooltip.Tooltip(tooltip.Config{
    ID:          "richTooltip",
    Text:        "Tooltip top",
    Description: "A rich tooltip with longer text.",
    TriggerText: "Hover Me",
})

// Click tooltip
@tooltip.Tooltip(tooltip.Config{
    ID:          "clickTooltip",
    Text:        "Tooltip top",
    Trigger:     tooltip.Click,
    TriggerText: "Click Me",
})

Toast Breadcrumbs