2

Messages

Hadiyat Avatar Hadiyat Virgiawan You sent an attachment. 16 hours ago
John Low Avatar John Low Wait a sec.. 22 hours ago
Yong Tian Avatar Yong Tian How are you? 12 April
Andree Avatar Andree W Kindly check my work 08 April
Lisa Avatar Lisa Tan Please help me check this. 02 April
1

Notifications

Mark all as read
Today
MC Margo Corn has invited you to the project Untitled 2 min EH Elsa Hoffman removed you 1 hr
Yesterday
MP Nadya Pasutri mentioned you in a comment in the project Untitled 2 "Mike, we need to fix this asap" 14:12 KK Konstantin Konstantinovich removed you from Mobile Dolfin 12:03
25 Mar
NP Nadya Pasutri accepted your invitation the project Untitled 2 09:45 KK Siti accepted the invitation to the project Tablature 08:15
Home / User Interface / Components

Popover

A tooltip-like component but with richer content.

The popover component is similar to dropdowns and tooltips. The difference is just in the content.

We use the same javascript component as dropdowns due to the similar usage. It also relies on the awesome Tippy.js.

Usage

You need a trigger and a popover element placed next to each other. Don't forget to set the data-popover-toggle attribute to the trigger element. Popover element has popover class.

Popover Title

Popover Content

Placement

Almost any position is supported. That is why we chose TippyJS!

To set the placement, just pass the placement value to the data-tippy-placement attribute. It's as simple as that. See all the available placements here.

Popover Title

Popover Content

Trigger

You can take a look directly at Tippy Trigger Documentation all the possible value.

Popover Title

Popover Content

Initializing

You can use one of these two methods to initialize the popover instance.

Via Data Attributes

The easiest way to initialize the popover component is by using the data attributes. All the example usage above is using this method. If you haven't checked it out yet, just scroll back to the top.

Place the trigger and target elements next to one another. Then, set the data-popover-toggle attribute to the trigger element. Alternatively, if you don't want to place the two elements next to one another, you can set the value of the data-popover-toggle attribute as a selector that matches the target element.

There are more options you can set by adding the data-popover-{key}="{value}" or data-tippy-{key}="{value}" attribute to popover elements. The value fully supports JSON syntax.

Via Javascript

For how to initialize the popover through Javascript, please refer to the dropdown javascript initialization section due to the same usage. The only difference is that dropdowns use the { theme: 'dropdown' }, while popovers use { theme: 'popover' } option.

API

Since popovers use the same javascript component as dropdowns, please refer to the dropdown API section.