Popover

Basic Examples

Basic Usage

Click below button to toggle popover:

Directions

Four direction options are available: top, right, bottom, and left aligned:

Dismiss on next click

Use the focus trigger to dismiss popovers on the next click that the user makes.
Dismissible popover

Advanced Examples

HTML Content

Insert HTML into the popover:

Offset

Offset of the popover relative to its target. For more information refer to Tether's offset docs.

Skin

Use data-skin="light" or data-skin="dark" parameters to set popover skin. Default skin is light.
Megan wrote
Hi Bob. What time will be the meeting ?
Hi Megan. It's at 2.30PM
Megan wrote
Will the development team be joining ?
Yes sure. I invited them as well
2:30PM
Megan wrote
Noted. For the Coca-Cola Mobile App project as well ?
Yes, sure.
Please also prepare the quotation for the Loop CRM project as well.
3:15PM
M
Megan wrote
Noted. I will prepare it.
Thanks Megan. I will see you later.
Megan wrote
Sure. See you in the meeting soon.
General Settings
Email Notifications
Site Tracking
SMS Alerts
Backup Storage
Audit Logs
System Settings
System Logs
Error Reporting
Applications Logs
Backup Servers
Audit Logs
System Logs
12 new users registered important Just now
System shutdown 11 mins
New invoice received 20 mins
Database overloaded 89% resolved 1 hr
System error 2 hrs
Production server down pending 3 hrs
Production server up 5 hrs
Applications Logs
New order received urgent 7 hrs
12 new users registered Just now
System shutdown 11 mins
New invoices received 20 mins
Database overloaded 89% 1 hr
System error pending 2 hrs
Production server down 3 hrs
Server Logs
Production server up 5 hrs
New order received 7 hrs
12 new users registered Just now
System shutdown 11 mins
New invoice received 20 mins
Database overloaded 89% 1 hr
System error 2 hrs
Production server down 3 hrs
Production server up 5 hrs
New order received 1117 hrs