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
<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 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.
<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. |
Giuseppe Di Terlizzi