gsxui

Tooltip

Basic

// Package tooltip holds the site's example gsx components for ui/tooltip.
package tooltip

import (
	"github.com/gsxhq/gsxui/ui"
)

// Basic shows a tooltip on hover/focus of a Button trigger.
component Basic() {
	<ui.Tooltip>
		<ui.Button variant="outline" data-gsxui-tooltip-trigger>Hover me</ui.Button>
		<ui.TooltipContent>Add to library</ui.TooltipContent>
	</ui.Tooltip>
}

Custom width

package tooltip

import (
	"github.com/gsxhq/gsxui/ui"
)

// Wide overrides TooltipContent's default w-fit with a caller class,
// proving tailwind-merge wins over the base utility.
component Wide() {
	<ui.Tooltip>
		<ui.Button variant="outline" data-gsxui-tooltip-trigger>Info</ui.Button>
		<ui.TooltipContent class="w-64 text-center">
			Deploys automatically when you push to the main branch.
		</ui.TooltipContent>
	</ui.Tooltip>
}