Tooltip
Provides a short text label or explanation when a user hovers or focuses a trigger.
On this page
This docs is LLM-friendly and available as clean Markdown.
Supported browser agents can also use WebMCP to search, read, and open these docs. Learn more
Usage
import {
GlTooltip,
GlTooltipContent,
GlTooltipTrigger,
} from "gitlab-ui-react/tooltip";<GlTooltip>
<GlTooltipTrigger>Hover or focus</GlTooltipTrigger>
<GlTooltipContent>Additional context</GlTooltipContent>
</GlTooltip>Default
Use a tooltip for short, supplemental text such as the name of an icon-only control. Use a popover when the content needs structure, interaction, or persistent visibility.
Icon button tooltip
import { GlButton } from "gitlab-ui-react/button";
import {
GlTooltip,
GlTooltipContent,
GlTooltipTrigger,
} from "gitlab-ui-react/tooltip";
export default function TooltipExample() {
return (
<div className="flex min-h-[8rem] items-center justify-center">
<GlTooltip>
<GlTooltipTrigger asChild>
<GlButton aria-label="Copy project ID" icon="copy-to-clipboard" />
</GlTooltipTrigger>
<GlTooltipContent>Copy project ID</GlTooltipContent>
</GlTooltip>
</div>
);
}
Placement
Tooltips support the four cardinal placements. Treat the selected value as a preference because collision detection can move the tooltip to keep it visible.
Tooltip placements
import { GlButton } from "gitlab-ui-react/button";
import {
GlTooltip,
GlTooltipContent,
GlTooltipTrigger,
} from "gitlab-ui-react/tooltip";
export default function TooltipPlacementsExample() {
return (
<div className="flex min-h-[10rem] flex-wrap items-center justify-center gap-6">
<GlTooltip delay={0}>
<GlTooltipTrigger asChild><GlButton>Top</GlButton></GlTooltipTrigger>
<GlTooltipContent placement="top">Top tooltip</GlTooltipContent>
</GlTooltip>
<GlTooltip delay={0}>
<GlTooltipTrigger asChild><GlButton>Right</GlButton></GlTooltipTrigger>
<GlTooltipContent placement="right">Right tooltip</GlTooltipContent>
</GlTooltip>
<GlTooltip delay={0}>
<GlTooltipTrigger asChild><GlButton>Bottom</GlButton></GlTooltipTrigger>
<GlTooltipContent placement="bottom">Bottom tooltip</GlTooltipContent>
</GlTooltip>
<GlTooltip delay={0}>
<GlTooltipTrigger asChild><GlButton>Left</GlButton></GlTooltipTrigger>
<GlTooltipContent placement="left">Left tooltip</GlTooltipContent>
</GlTooltip>
</div>
);
}
Accessibility
- Tooltips must repeat or supplement an operable trigger; never put essential information only inside a tooltip.
- Use
asChildwhen an existing button or link is the trigger so the page keeps one interactive element. - The tooltip opens on hover and keyboard focus, and the trigger is associated through
aria-describedbywhile it is open. - Keep content concise and noninteractive. Use a popover for links, buttons, or rich content.
API
GlTooltip
| Prop | Description | Default |
|---|---|---|
delay |
Delays opening on hover, in milliseconds. | 500 |
closeDelay |
Delays closing, in milliseconds. | 0 |
disabled |
Prevents the tooltip from opening. | false |
noninteractive |
Prevents hovering the tooltip content from keeping it open. | false |
defaultOpen |
Sets the initial uncontrolled state. | false |
open |
Controls the open state. | — |
onOpenChange |
Reports requested open-state changes and their reason. | — |
onOpenChangeComplete |
Runs after the opening or closing transition completes. | — |
id |
Sets the ID shared with the trigger’s aria-describedby. |
Generated |
GlTooltipTrigger
| Prop | Description | Default |
|---|---|---|
asChild |
Composes trigger behavior onto one child element instead of rendering an inline span. |
false |
disabled |
Prevents this trigger from opening the tooltip. | false |
GlTooltipContent
| Prop | Description | Default |
|---|---|---|
placement |
Prefers top, right, bottom, or left. |
"top" |
boundary |
Sets collision detection to the viewport, clipping ancestors, or an element. | Clipping ancestors |
boundaryPadding |
Adds collision padding in pixels. | 5 |
noFade |
Disables the fade transition. | false |
container |
Sets the portal container. | Configured default or document.body |