Popover     

QPopover should be used when you want a menu (or any content) to be displayed on a popup as a result of user clicking/tapping on a DOM element / component.

Installation

Edit /quasar.conf.js:

framework: {
  components: ['QPopover'],

  // optional if you want to use
  // directive `v-close-overlay`
  directives: ['CloseOverlay']
}

Basic Usage

In the example below we use a Button (as a target) and when clicking/tapping on it Quasar will display a List.

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

<!--
  The target button (can be anything else)
  must be direct parent of QPopover on the
  DOM hierarchy.
-->
<q-btn label="Email">
  <!-- Direct child of target -->
  <q-popover>
    <!--
      The DOM element(s) that make up the popup,
      in this case a list:
    -->
    <q-list separator link>
      <!-- notice `v-close-overlay` which closes popover -->
      <q-item v-close-overlay @click.native="doSomething">
        ...
      </q-item>
    </q-list>
  </q-popover>
</q-btn>

The idea is to place QPopover inside your DOM element / component that you want to be the trigger as direct child. Don’t worry about QPopover content inheriting CSS from the container as the QPopover will be injected as a direct child of <body>.

IMPORTANT
When on a browser, hitting the <ESCAPE> key also closes the QPopover.

Toggle through v-model

<template>
  <div>
    <q-btn color="primary" @click="showing = true" label="Show" />
    <q-btn color="primary" @click="showing = false" label="Hide" />

    <div>
      ...
      <q-popover v-model="showing">...</q-popover>
    </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)
max-heightStringOptional maximum height of Popover content. Example: 500px
touch-positionBooleanOpen Popover from the position where user clicked/tapped on anchor.
fitBooleanPopover has min-width set as same as the width of the container.
disableBooleanWhen set to true, Popover won’t be triggered.
offsetArray of 2 NumbersOffset on horizontal and vertical (in pixels). Example: [18, 18].
disableBooleanDisable Popover

Vue Methods

MethodDescription
showOpen Popover. Takes one optional Function parameter to trigger after Popover is opened.
hideClose Popover. Takes one optional Function parameter to trigger after Popover is closed.
toggleToggle open/close Popover state. Takes one optional Function parameter to trigger after Popover is toggled.

Vue Events

Vue MethodDescription
@showTriggered after opening Popover.
@hideTriggered after closing Popover.

Handling Popover Dismissal

By default, clicking/tapping outside the QPopover content will close it. But if you’d like elements from the QPopover content to close it, then use the v-close-overlay Quasar directive.

Handling Positioning

Position of the QPopover can be customized. It keeps account of the anchor and self optional Vue properties. See demo and play with them.

The final position of the QPopover popup is calculated so that it will be displayed on the available screen real estate, switching to right-side and/or top-side when necessary.

If you would like the QPopover to appear from the touch/click point triggering the QPopover open, then use the Boolean touch-position Vue property:

<q-popover touch-position>
  ...
</q-popover>

The demo has touch-position specified for the big image on the center of the page.

Notify Tooltip
Last updated: Sat May 19 2018
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub