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.
// optional if you want to use
// directive `v-close-overlay`
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
<!-- Direct child of target -->
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">
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
When on a browser, hitting the <ESCAPE> key also closes the QPopover.
|Object||String of form |
|Boolean||Disable triggering the Popover by clicking/tapping on the parent element.|
|Boolean||(v0.17+) By default, for accessibility purposes, Popover focuses its content when it will be displayed. For use-cases when you need to keep focus on your current element, set this to |
|Boolean||(v0.17+) By default, for accessibility purposes, Popover refocuses the previously active element. Set to |
|Object||String of form |
|String||Optional maximum height of Popover content. Example: |
|Boolean||Open Popover from the position where user clicked/tapped on anchor, and keep the same relative position on scroll.|
|Boolean||Popover has |
|Boolean||When set to |
|Array of 2 Numbers||Offset on horizontal and vertical (in pixels). Example: |
|Boolean||(v0.17.10+) Popover will cover its parent element.|
|Boolean||(v0.17.10+) Popover will not be closed if clicking/tapping outside of it, like it happens by default.|
|Boolean||(v0.17.13+) Popover will not be closed if the parent element gets out of screen.|
|Open Popover. Takes one optional Function parameter to trigger after Popover is opened.|
|Close Popover. Takes one optional Function parameter to trigger after Popover is closed.|
|Toggle open/close Popover state. Takes one optional Function parameter to trigger after Popover is toggled.|
|Triggered after opening Popover.|
|Triggered after closing Popover.|
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.
Position of the QPopover can be customized. It keeps account of the optional
self Vue properties. See the 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:
The demo has
touch-position specified for the big image on the center of the page.