Tooltip

package showcase

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