The QTooltip component is to be used when you want to offer the user more information about a certain area in your App. When hovering the mouse over the target element (or touching and holding on touch-capable devices), the tooltip will appear. A stylus behaves like a mouse while hovering and like touch while pressed to the screen.
Usage
The idea with QTooltip is to place it inside your DOM element / component that you want to be the trigger as direct child. Don’t worry about QTooltip content inheriting CSS from the container as the QTooltip will be injected as a direct child of <body> through a Quasar Portal.
If you want to conditionally activate or de-activate a QTooltip, please use v-if on it instead of v-show.
Customize
Transitions
In the example below there’s a few transitions showcased. For a full list of transitions available, go to Transitions.
Reusable
The example below shows how to create a re-usable menu that can be shared with different targets.
Positioning
The position of QTooltip can be customized. It keeps account of the anchor and self optional props. The final position of QTooltip popup is calculated so that it will be displayed on the available screen real estate, switching to the right-side and/or top-side when necessary.
For horizontal positioning you can use start and end when you want to automatically take into account if on RTL or non-RTL. start and end mean “left” for non-RTL and “right” for RTL.
The offset prop does not translate the popup by a number of pixels. It expands the anchor element’s bounding box outward: offset[0] moves that box’s left edge to the left and its right edge to the right, while offset[1] moves top up and bottom down. The popup’s self point is then aligned to the anchor point of the expanded box, and only after that is the result clamped to the available screen real estate.
Two consequences are worth knowing, because both make an offset look like it is being ignored on one axis:
- A
middleorcenteranchor point does not move with the offset. Expanding both edges by the same amount leaves the midpoint exactly where it was, sooffset[0]is a no-op foranchor="... middle"andoffset[1]is a no-op foranchor="center ...", no matter which value you pass. QTooltip’s defaultanchorisbottom middle, so its horizontal offset only starts having an effect once you pick aleft,right,startorendanchor. - A clamped popup does not move with the offset either. Since the offset pushes the box outward, anchoring to a full-width or screen-edge element (or passing a very large value) can send the popup past a viewport edge, where it gets clamped back and the final position no longer depends on the offset value. Attach QTooltip to an inline or
inline-blocktrigger and pointanchor/selfinto free space, so the offset has room to take effect.
In short, to place the popup at a fixed pixel distance from one side of the anchor element, name that side in anchor instead of relying on middle/center.
<q-tooltip anchor="bottom middle" self="top middle">
Here I am!
</q-tooltip>Accessibility v2.25+
QTooltip implements the WAI-ARIA tooltip pattern: the popup renders with role="tooltip" and, while it is shown, its id is added to the anchor element’s aria-describedby (any values you set there yourself are preserved and restored on hide), so screen readers announce the tooltip content as the anchor’s description. The tooltip shows on keyboard focus (when the anchor matches :focus-visible) just as it does on hover, and Escape hides it without moving focus, as WCAG 1.4.13 requires.
Two things to keep in mind. A tooltip is a description, not a name — an icon-only button still needs its own aria-label, with the tooltip merely supplementing it. And the tooltip itself is transparent to the mouse (it cannot be hovered, and it hides when the pointer leaves the anchor), so keep its content short and non-interactive.