Popover

experimental

The Popover component is a wrapper for rich content that floats above other elements on the page. It is shown or hidden by interacting with a trigger element such as a button. Unlike a tooltip, it is usually triggered via click instead of hover, and it can contain interactive elements. The component is implemented using the native Popover API.

Examples

Base

Usually the trigger element for a popover is a <button> element. However, you can also use any other HTML element. By default, opening a popover will close any other open popovers and it can be closed by clicking outside the content. The behavior can be changed with the behavior property.

Accessibility Note:

If your trigger does not have a visible label, provide an accessible or visually hidden label and communicates the popover's state to assistive technologies.

Accessibility Note:

Use the aria-haspopup attribute on the trigger to indicate the type of interactive popup that this element triggers, usually dialog or `menu´; this should match the role of the popover content. You can see all possible values here.

Show code

HTML

<section>
    <o-popover>
        <o-button> Open popover! </o-button>

        <template #content>
            <b>Lorem ipsum dolor sit amet</b>, consectetur warning elit.
            <i>Fusce id fermentum quam</i>.
            <o-icon icon="heart" variant="danger" />
        </template>
    </o-popover>
</section>

Position

The direction in which the popover opens can be explicity defined using the position property. By default, the direction is automatically calculated based on the distance to the edge of the window.

Additionally, adding the teleport property will move the content to the referenced DOM location instead of the current one.

Show code

HTML

<section class="odocs-spaced">
    <o-field>
        <o-switch v-model="teleport" label="Teleport to Body" />
    </o-field>

    <p>
        <o-popover position="right" :teleport="teleport">
            <o-button label="Right Popover" />

            <template #content>
                <h4>Heading</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur warning elit.
                    Fusce id fermentum quam
                </p>
                <a href="#">Some Link</a>
            </template>
        </o-popover>

        <o-popover position="top" :teleport="teleport">
            <o-button label="Top Popover" />

            <template #content>
                <h4>Heading</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur warning elit.
                    Fusce id fermentum quam
                </p>
                <a href="#">Some Link</a>
            </template>
        </o-popover>

        <o-popover position="bottom" :teleport="teleport">
            <o-button label="Bottom Popover" />

            <template #content>
                <h4>Heading</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur warning elit.
                    Fusce id fermentum quam
                </p>
                <a href="#">Some Link</a>
            </template>
        </o-popover>

        <o-popover position="left" :teleport="teleport">
            <o-button label="Left Popover" />

            <template #content>
                <h4>Heading</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur warning elit.
                    Fusce id fermentum quam
                </p>
                <a href="#">Some Link</a>
            </template>
        </o-popover>
    </p>
</section>

JS

import { ref } from "vue";

const teleport = ref(false);

Delay

The appearance of the content can be delayed using the delay property.

Show code

HTML

<section>
    <o-popover content="The content is shown after 1000ms" :delay="1000">
        <o-button variant="warning" label="Delayed" />
    </o-popover>
</section>

Popover Component

A popover is a content container that displays rich content over the top of other content.

<o-popover></o-popover>

Props

Prop name	Description	Type	Values	Default
active	Whether popover is active or not, use v-model:active to make it two-way binding	boolean	-	false
animation	Show and dismiss animation	string	-	From config: popover: {   animation: "fade" }
behavior	The behavior of the popover.	"auto" | "hint" | "manuell"	auto, hint, manuell	"auto"
content	Content text, unnecessary when content slot is used	string	-
delay	Defines a delay (in ms) before the content appears	number	-
disabled	The component will be disabled	boolean	-	false
id	A unique HTML id for the popover element	string	-	useId()
override	Override existing theme classes completely	boolean	-
position	The position of the popover relative to the trigger	"bottom" | "center" | "left" | "right" | "top"	top, bottom, left, right, center	From config: popover: {   position: "top" }
teleport	Append the component to another part of the DOM. Set true to append the component to the body. In addition, any CSS selector string or an actual DOM node can be used.	boolean | object | string	-	From config: popover: {   teleport: false }

Events

Event name	Properties	Description
update:active	value boolean - updated active prop	active prop two-way binding
close	event Event - native event	on active state changes to false
open	event Event - native event	on active state changes to true

Slots

Name	Description	Bindings
default	Define a trigger here	active boolean - popover active state open (): void - function to open the popover
content	Override the popover content, default is content prop	close (): void - function to close the popover

Class Inspector

Classes applied to the element:

➜ Want to know how does the Class Inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns:

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link ( ▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop.

Class prop	Description	Props	Suffixes
rootClass	Class of the root element.
teleportClass	Class of the root element when teleported.	teleport
triggerClass	Class of the trigger element.
contentClass	Class of the content element.

Sass Variables

Current theme ➜ Oruga

The theme does not have any custom variables for this component.

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

The theme does not have any custom variables for this component.