Tooltip

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 quickly tapping on mobile platforms), the tooltip will appear.

Installation


// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QTooltip'
    ]
  }
}

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.

Basic



Toggle through v-model



Customize

Customize



Custom delay (1 second)



With offset



Transitions

In the example below there’s a few transitions showcased. For a full list of transitions available, go to Transitions.

Custom transition



Reusable

The example below shows how to create a re-usable menu that can be shared with different targets.

Using target



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.


Anchor Origin
Vertical
Top
Center
Bottom
Horizontal
Left
Middle
Right
Self Origin
Vertical
Top
Center
Bottom
Horizontal
Left
Middle
Right

<q-tooltip anchor="bottom middle" self="top middle">
  Here I am!
</q-tooltip>

QTooltip API