# Popover QML Type

A popover allows an application to present additional content without changing the view. A popover has a fixed width and automatic height, depending on is contents. It can be closed by clicking anywhere outside of the popover area. More...

Import Statement: | import Lomiri.Components.Popups 1.3
Inherits: | PopupBase
Inherited By: | ActionSelectionPopover

- List of all members, including inherited members

## Properties

- autoClose : bool
- caller : Item
- callerMargin : real
- container : list<Object>
- contentHeight : real
- contentWidth : real
- edgeMargins : real
- foregroundStyle : Component
- pointerTarget : Item
- style : Component
- styleName : string
- theme : ThemeSettings

## Methods

- hide()
- show()

## Detailed Description

See also the Design Guidelines on Popovers.

Example:

    import QtQuick 2.4
    import Lomiri.Components 1.3
    import Lomiri.Components.Popups 1.3
    import Lomiri.Components.ListItems 1.3 as Old_ListItem
    Rectangle {
        color: theme.palette.normal.background
        width: units.gu(80)
        height: units.gu(80)
        Component {
            id: popoverComponent

            Popover {
                id: popover
                Column {
                    id: containerLayout
                    anchors {
                        left: parent.left
                        top: parent.top
                        right: parent.right
                    }

                    // there is no equivalent yet to ListItem.Header
                    Old_ListItem.Header { text: "Standard list items" }

                    ListItem {
                        // shall specify the height when Using ListItemLayout inside ListItem
                        height: somethingLayout.height + (divider.visible ? divider.height : 0)
                        ListItemLayout {
                            id: somethingLayout
                            title.text: "Do somethings"
                        }
                        onClicked: console.log("clicked on ListItem with onClicked implemented")
                    }
                    ListItem {
                        // shall specify the height when Using ListItemLayout inside ListItem
                        height: somethingElseLayout.height + (divider.visible ? divider.height : 0)
                        ListItemLayout {
                            id: somethingElseLayout
                            title.text: "Do somethings"
                            subtitle.text: "else"
                        }
                    }
                    ListItem {
                        // shall specify the height when Using ListItemLayout inside ListItem
                        height: closeBtn.height + (divider.visible ? divider.height : 0)
                        Button {
                            id: closeBtn
                            text: "Close button"
                            onClicked: PopupUtils.close(popover);
                        }
                    }
                }
            }
        }
        Button {
            id: popoverButton
            anchors.centerIn: parent
            text: "open"
            onClicked: PopupUtils.open(popoverComponent, popoverButton)
        }
    }

## Property Documentation

autoClose : bool

The property drives the automatic closing of the Popover when user taps on the dismissArea. The default behavior is to close the Popover, therefore set to true.

When set to false, closing the Popover is the responsibility of the caller. Also, the mouse and touch events are not blocked from the dismissArea.

caller : Item

The Item such as a Button that the user interacted with to open the Dialog. This property will be used for the automatic positioning of the Dialog next to the caller, if possible.

callerMargin : real

The property holds the margin from the popover's caller. The property is themed.

[default] container : list<Object>

Content will be put inside the foreround of the Popover.

contentHeight : real

Use this property to override the default content height.

contentWidth : real

Use this property to override the default content width.

edgeMargins : real

The property holds the margins from the popover's dismissArea. The property is themed.

foregroundStyle : Component

Exposes the style property of the StyledItem contained in the Popover. Refer to StyledItem how to use it.

pointerTarget : Item

The property holds the item to which the pointer should be anchored to. This can be same as the caller or any child of the caller. By default the property is set to caller.

style : Component

The style of the foreground of the Popover. This property takes precedence over styleName

This property was introduced in Lomiri.Components 1.3.

See also StyledItem::style.

styleName : string

The style name of the foreground of the Popover.

This property was introduced in Lomiri.Components 1.3.

See also StyledItem::styleName.

theme : ThemeSettings

Configure the theme of the Popover foreground and all its subcomponents.

This property was introduced in Lomiri.Components 1.3.

See also StyledItem::theme and Dialog::theme.

## Method Documentation

hide()

Hide the popover. Only use this function if you handle memory management. Otherwise use PopupUtils.close() to do it automatically.

show()

Make the popover visible. Reparent to the background area object first if needed. Only use this function if you handle memory management. Otherwise use PopupUtils.open() to do it automatically.