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 briefly touching and holding on mobile platforms), the tooltip will appear.
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.
WARNING
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.
TIP
The offset prop is applied to the anchor element’s bounding box, and only then is the final position clamped to the available screen real estate. As a result, a large offset — or anchoring QTooltip to a full-width / screen-edge element — can push the popup against a viewport edge, where it gets clamped and the offset appears to have no effect (the clamped position then becomes independent of the offset value). If an offset seems to be ignored on one axis, make sure the chosen anchor/self lets the popup expand into free space on that axis — for example, attach QTooltip to an inline / inline-block trigger rather than to a full-width block element.
<q-tooltip anchor="bottom middle" self="top middle">
Here I am!
</q-tooltip>