Popovers

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

Popovers whose both title and content are zero-length are never displayed.

Examples

Click to toggle popover 

<popover title="Popover title" content="And here's some amazing content. It's very engaging. Right?"><btn type="danger" size="lg">Click to toggle popover</btn></popover>

Four directions

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

Popover on right Popover on top Popover on bottom Popover on left 

<popover placement="right" content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
<btn>Popover on right</btn>
</popover>
 
<popover placement="top" content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
<btn>Popover on top</btn>
</popover>
 
<popover placement="bottom" content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
<btn>Popover on bottom</btn>
</popover>
 
<popover placement="left" content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
<btn>Popover on left</btn>
</popover>

Dismiss on next click

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

Dismissible popover 

<popover trigger="focus" title="Dismissible popover" content="And here's some amazing content. It's very engaging. Right?"><btn type="danger" size="lg">Dismissible popover</btn></popover>

DokuWiki syntax

Dismissible Popover 

<popover html="true" title="**Dismissible** popover" content="And here's some amazing content. \\ **It's very engaging**. \\ Right?">Dismissible Popover</popover>

Options

Name Default Values Description
animation true true false Apply a CSS fade transition to the popover
content NULL The content value
title NULL The title value
html false true false Insert DokuWiki syntax into the popover
placement right top bottom left right auto How to position the popover.
When auto is specified, it will dynamically reorient the popover. For example, if placement is auto left, the popover will display to the left when possible, otherwise it will display right.
trigger click click hover focus manual How popover is triggered. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.
delay
delay-show
delay-hide 		0 Delay showing and hiding the popover (ms) - does not apply to manual trigger type
If a number is supplied, delay is applied to both hide/show.