Tooltip     

QTooltip should 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.

Basic Usage

In the example below we use a QBtn (as a target) and when hovering over it, Quasar will display some text.

You can replace QBtn and the QPopover content with any DOM elements or components you like.

<!--
The target button (can be anything else)
must be direct parent of QTooltip on the
DOM hierarchy.
-->
<q-btn>
Email
<!-- Direct child of target -->
<q-tooltip>
<!--
The DOM element(s) that make up the tooltip,
in this case a simple text:
-->
Some text as content of Tooltip
</q-tooltip>
</q-btn>

The idea is to place QTooltip inside your DOM element / component (as direct child in DOM hierarchy), when you want it to be the trigger for the QTooltip. Don’t worry about QTooltip content inheriting CSS from the container. This won’t occur, since QTooltip will be injected as a direct child of <body>.

Toggle through v-model

<template>
<div>
<q-btn color="primary" @click="showing = true" label="Show" />
<q-btn color="primary" @close="showing = false" label="Hide" />
<div>
...
<q-tooltip v-model="showing">...</q-tooltip>
</div>
</div>
</template>
<script>
export default {
data () {
return {
showing: false
}
}
}
</script>

Vue Properties

Vue PropertyTypeDescription
anchorObjectString of form bottom left (vertical horizontal).
selfObjectString of form top left (vertical horizontal).
offsetArrayArray with two numbers. Offset on horizontal and vertical (in pixels).
max-heightStringOptional maximum height of Popover content. Example: 500px
disableBooleanWhen set to true, Popover won’t be triggered.
delayNumberSet the delay, when tooltip should appear.

Vue Methods

Vue MethodDescription
toggle()Toggle open/close state.
open()Open Popover.
close()Close Popover.

Handling Positioning

The position of QTooltip can be customized. It keeps account of the anchor and self optional Vue properties. Check out the demo and play with them.

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.