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>

Props

title

• Type: String
• default: null

Popover content title inside context window.

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

icon

• Type: String

• default: null

• 'q-icon-*' - class string, see full list here

Popover content icon inside context window.

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

iconColor

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

Icon's color.

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

popperOptions

• Type: Object
• Default: null

We use Popper.js to show tooltips & popovers. See full options guide here

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

trigger

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

Opening event trigger.

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

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';

<q-popover
  placement="top"
  ...
/>

transition

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

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

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

openDelay

• Type: Number
• Default: 10

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

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

closeDelay

• Type: Number
• Default: 10

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

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

minWidth

• Type: String, Number
• Default: null

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

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

maxWidth

• Type: String, Number
• Default: null

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

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

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'"
  ...
/>

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>

reference

The trigger.

<q-popover ...>
  <template #reference>
    ...trigger element
  </template>
</q-popover>