Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
This component uses newly available browser features
This component uses CSS Anchor Positioning which has only been widely supported since January 2026. If you're targeting older or less mainstream browsers then maybe this component isn't for you, yet.
Alternatively you can use Singlestage 0.4 which positions the component correctly but with limited flexibility for alignment, or roll your own using Singlestage CSS classes for consistent styling.
More Infouse leptos::prelude::*; use singlestage::*; #[component] pub fn TooltipExample() -> impl IntoView { view! { <Tooltip> <TooltipTrigger> <Button variant="outline">"Hover"</Button> </TooltipTrigger> <TooltipContent> <p>"Add to library"</p> </TooltipContent> </Tooltip> } }
Side
Use the side prop to change the position of the tooltip.
use leptos::prelude::*; use singlestage::*; #[component] pub fn TooltipSideExample() -> impl IntoView { view! { <div class="flex flex-wrap gap-2"> <For each=move || ["left", "top", "bottom", "right"] key=|side| side.to_string() let(side) > <Tooltip> <TooltipTrigger> <Button variant="outline" class="w-fit capitalize"> {side} </Button> </TooltipTrigger> <TooltipContent side={side}> <p>"Add to library"</p> </TooltipContent> </Tooltip> </For> </div> } }
With Keyboard Shortcut
use leptos::prelude::*; use singlestage::*; #[component] pub fn TooltipWithKeyboardShortcutExample() -> impl IntoView { view! { <Tooltip> <TooltipTrigger> <Button variant="outline" size="icon-sm"> {icon!(icondata::LuSave)} </Button> </TooltipTrigger> <TooltipContent>"Save Changes" <Kbd>"S"</Kbd></TooltipContent> </Tooltip> } }
Disabled Button
use leptos::prelude::*; use singlestage::*; #[component] pub fn TooltipDisabledButtonExample() -> impl IntoView { view! { <Tooltip> <TooltipTrigger> <Button variant="outline" disabled=true> "Disabled" </Button> </TooltipTrigger> <TooltipContent> <p>"This feature is currently unavailable"</p> </TooltipContent> </Tooltip> } }
Anatomy
Import all parts and piece them together.
use leptos::prelude::*; use singlestage::*; #[component] pub fn TooltipAnatomy() -> impl IntoView { view! { <Tooltip> <TooltipTrigger /> <TooltipContent /> </Tooltip> } }
API Reference
Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
TooltipContent
.
| Name | Type | Default | Description |
|---|---|---|---|
| align | String | "center" | Set where the tooltip is rendered along the chosen side. |
| side | String | "top" | Set which side of the triggering element that the tooltip will spawn from. |