Skip to main content

Variable: Popover

const Popover: object

Defined in: react/src/generated/jsx.ts:14364

Presents a bubble-like popup.

It is primarily meant to provide context-dependent information or options. Popovers are attached to a parent widget. The parent widget must support popover children, as [class@Gtk.MenuButton] and [class@Gtk.PopoverMenuBar] do. If you want to make a custom widget that has an attached popover, you need to call [method@Gtk.Popover.present] in your [vfunc@Gtk.Widget.size_allocate] vfunc, in order to update the positioning of the popover.

The position of a popover relative to the widget it is attached to can also be changed with [method@Gtk.Popover.set_position]. By default, it points to the whole widget area, but it can be made to point to a specific area using [method@Gtk.Popover.set_pointing_to].

By default, GtkPopover performs a grab, in order to ensure input events get redirected to it while it is shown, and also so the popover is dismissed in the expected situations (clicks outside the popover, or the Escape key being pressed). If no such modal behavior is desired on a popover, [method@Gtk.Popover.set_autohide] may be called on it to tweak its behavior.

GtkPopover as menu replacement​

GtkPopover is often used to replace menus. The best way to do this is to use the [class@Gtk.PopoverMenu] subclass which supports being populated from a GMenuModel with [ctor@Gtk.PopoverMenu.new_from_model].

<section>
<attribute name="display-hint">horizontal-buttons</attribute>
<item>
<attribute name="label">Cut</attribute>
<attribute name="action">app.cut</attribute>
<attribute name="verb-icon">edit-cut-symbolic</attribute>
</item>
<item>
<attribute name="label">Copy</attribute>
<attribute name="action">app.copy</attribute>
<attribute name="verb-icon">edit-copy-symbolic</attribute>
</item>
<item>
<attribute name="label">Paste</attribute>
<attribute name="action">app.paste</attribute>
<attribute name="verb-icon">edit-paste-symbolic</attribute>
</item>
</section>

Shortcuts and Gestures

GtkPopover supports the following keyboard shortcuts:

  • Escape closes the popover.
  • Alt makes the mnemonics visible.

The following signals have default keybindings:

CSS nodes

popover.background[.menu]
├── arrow
╰── contents
╰── <child>

GtkPopover has a main node with name popover, an arrow with name arrow, and another node for the content named contents. The popover node always gets the .background style class. It also gets the .menu style class if the popover is menu-like, e.g. is a [class@Gtk.PopoverMenu].

Particular uses of GtkPopover, such as touch selection popups or magnifiers in GtkEntry or GtkTextView get style classes like .touch-selection or .magnifier to differentiate from plain popovers.

When styling a popover directly, the popover node should usually not have any background. The visible part of the popover can have a shadow. To specify it in CSS, set the box-shadow of the contents node.

Note that, in order to accomplish appropriate arrow visuals, GtkPopover uses custom drawing for the arrow node. This makes it possible for the arrow to change its shape dynamically, but it also limits the possibilities of styling it using CSS. In particular, the arrow gets drawn over the content node's border and shadow, so they look like one shape, which means that the border width of the content node and the arrow node should be the same. The arrow also does not support any border shape other than solid, no border-radius, only one border width (border-bottom-width is used) and no box-shadow.

Type Declaration​

NameTypeDefined in
Child"Popover.Child"react/src/generated/jsx.ts:14366
DefaultWidget"Popover.DefaultWidget"react/src/generated/jsx.ts:14367
Root"Popover.Root"react/src/generated/jsx.ts:14365