Tooltip

Small pop-up that appears on hover. Powered by Popover with Floating UI.

Source Tailwind CSS JavaScript

package showcase

import (
	"github.com/templui/templui/components/button"
	"github.com/templui/templui/components/tooltip"
)

templ TooltipDefault() {
	@tooltip.Tooltip() {
		@tooltip.Trigger(tooltip.TriggerProps{}) {
			@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
		}
	}
}

Installation

templui add tooltip

Load the script once in your layout:

<head>
  @tooltip.Script()
</head>

Examples

Positions

package showcase

import (
	"github.com/templui/templui/components/button"
	"github.com/templui/templui/components/tooltip"
)

templ TooltipPositions() {
	<div class="flex gap-2">
		@tooltip.Tooltip() {
			@tooltip.Trigger(tooltip.TriggerProps{}) {
				@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{}) {
				@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{}) {
				@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{}) {
				@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>
}

API Reference

Required parameter

Hover for description

Tooltip

Root wrapper component for tooltip functionality.

Name	Type	Default
`ID` Unique identifier for the tooltip wrapper.	`string`	-
`Class` Additional CSS classes to apply to the tooltip wrapper.	`string`	-
`Attributes` Additional HTML attributes to apply to the tooltip wrapper.	`templ.Attributes`	-

Trigger

Element that triggers the tooltip on hover.

Name	Type	Default
`ID` Unique identifier for the trigger element.	`string`	-
`Class` Additional CSS classes to apply to the trigger.	`string`	-
`Attributes` Additional HTML attributes to apply to the trigger element.	`templ.Attributes`	-

Content

Container for the tooltip content with positioning options.

Name	Type	Default
`ID` Optional HTML id for the content element.	`string`	-
`Class` Additional CSS classes to apply to the content. Default styling includes dark background.	`string`	-
`Attributes` Additional HTML attributes to apply to the content element.	`templ.Attributes`	-
`ShowArrow` Whether to show an arrow pointing to the trigger element.	`bool`	`false`
`Position` Position of the tooltip relative to trigger. Options: 'top', 'right', 'bottom', 'left'.	`Position`	`top`
`HoverDelay` Delay in milliseconds before showing the tooltip on hover.	`int`	`0`
`HoverOutDelay` Delay in milliseconds before hiding the tooltip on hover out.	`int`	`0`

Menu

Getting Started

Components

Tooltip

Installation

Examples

API Reference

Tooltip

Trigger

Content