Tooltip

package showcase

import (
	"github.com/axzilla/templui/component/button"
	"github.com/axzilla/templui/component/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
		}
	}
}

package tooltip

import (
	"github.com/axzilla/templui/component/popover"
	"github.com/axzilla/templui/util"
)

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.Position {
	switch position {
	case PositionTop:
		return popover.PositionTop
	case PositionRight:
		return popover.PositionRight
	case PositionBottom:
		return popover.PositionBottom
	case PositionLeft:
		return popover.PositionLeft
	default:
		return popover.PositionTop
	}
}

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:         util.TwMerge("px-4 py-1 bg-foreground text-background border-foreground", p.Class),
		Attributes:    p.Attributes,
		Position:      mapTooltipPositionToPopover(p.Position),
		ShowArrow:     p.ShowArrow,
		HoverDelay:    p.HoverDelay,
		HoverOutDelay: p.HoverOutDelay,
	}) {
		{ children... }
	}
}