AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Add to library
Settings
templ
templ TooltipDemo() {
<div class="flex flex-wrap gap-8 p-8">
@ui.Tooltip("", nil) {
@ui.TooltipTrigger("", nil) {
@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantOutline, ui.ButtonSizeDefault, "", nil) {
Hover me
}
}
@ui.TooltipContent("top", "", nil) {
Add to library
}
}
@ui.Tooltip("", nil) {
@ui.TooltipTrigger("", nil) {
@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantDefault, ui.ButtonSizeIcon, "", templ.Attributes{"aria-label": "Settings"}) {
@icons.Settings(icons.Props{Class: "h-4 w-4"})
}
}
@ui.TooltipContent("top", "", nil) {
Settings
}
}
</div>
}