Qui Max

QPopover 💬

QPopover is a non-modal dialog that floats around a trigger. It is used to display contextual information to the user, and should be paired with a clickable trigger element.

Example

Default view:

Using in template:

<q-popover
  title="Title"
  icon="q-icon-question"
>
  <template #reference>
    <q-button circle type="icon" theme="secondary" size="small" icon="q-icon-question-mark" />
  </template>

  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</q-popover>
1
2
3
4
5
6
7
8
9
10

Props

title

  • Type: String
  • default: null

Popover content title inside context window.

<q-popover
  title="Title"
  ...
/>

 


1
2
3
4

icon

Popover content icon inside context window.

<q-popover
  icon="q-icon-question"
  ...
/>

 


1
2
3
4

iconColor

  • Type: String
  • default: 'var(--gradient-secondary)'

Icon's color.

<q-popover
  icon-color="#ececec"
  ...
/>

 


1
2
3
4

popperOptions

  • Type: Object
  • Default: null

We use Popper.js to show tooltips & popovers. See full options guide hereopen in new window

<q-popover
  :popper-options="{
    modifiers: [
      {
        name: 'flip',
        enabled: false,
      },
    ],
  }"
  ...
/>

 









1
2
3
4
5
6
7
8
9
10
11

trigger

  • Type: 'click' | 'hover'
  • Default: 'click'

Opening event trigger.

<q-popover
  trigger="hover"
  ...
/>

 


1
2
3
4

placement

  • Type: String
  • Default: 'right-start'

Sets picker placement around the button.

// ts type
type Placement = AutoPlacement | BasePlacement | VariationPlacement;
type AutoPlacement = 'auto' | 'auto-start' | 'auto-end';
type BasePlacement = 'top' | 'bottom' | 'right' | 'left';
type VariationPlacement =
  | 'top-start'
  | 'top-end'
  | 'bottom-start'
  | 'bottom-end'
  | 'right-start'
  | 'right-end'
  | 'left-start'
  | 'left-end';
1
2
3
4
5
6
7
8
9
10
11
12
13
<q-popover
  placement="top"
  ...
/>

 


1
2
3
4

transition

  • Type: String
  • Default: 'q-fade'

Custom transition's animation. Applies for the default vue <transition> tag as a name.

<q-popover
  transition="customTransitionName"
  ...
/>

 


1
2
3
4

openDelay

  • Type: Number
  • Default: 10

The delay before appearing, in milliseconds. NOTE: works only when trigger is hover.

<q-popover
  :open-delay="100"
  ...
/>

 


1
2
3
4

closeDelay

  • Type: Number
  • Default: 10

The delay before disappearing, in milliseconds. NOTE: works only when trigger is hover.

<q-popover
  :close-delay="100"
  ...
/>

 


1
2
3
4

minWidth

  • Type: String, Number
  • Default: null

Popover's min-width style (in px).

<q-popover
  :min-width="100"
  ...
/>

 


1
2
3
4

maxWidth

  • Type: String, Number
  • Default: null

Popover's max-width style (in px).

<q-popover
  :max-width="100"
  ...
/>

 


1
2
3
4

teleportTo

  • Type String, HTMLElement
  • Default: 'body'

Specifies a target element where QPopover will be moved from original layout place. (has to be a valid query selector, or an HTMLElement).

<q-popover
  teleport-to="'.popover-wrapper'"
  ...
/>

 


1
2
3
4

Events

show

Triggers when the context window appeares.

hide

Triggers when the context window disappeares.

Slots

default

Popover main content.

<q-popover
  ...
>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</q-popover>
1
2
3
4
5

reference

The trigger.

<q-popover
  ...
>
  <template #reference>
    ...trigger element
  </template>
</q-popover>
1
2
3
4
5
6
7
Last Updated:
Contributors: Tim Bochkarev