Static popover
Four options are available: top, right, bottom, and left aligned.
Popover top
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover right
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover bottom
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover left
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
No markup shown as popovers are generated from JavaScript and content within a data attribute.
Live demo
<a data-content="And here's some amazing content. It's very engaging. right?" rel="popover" class="Popovers btn btn-large btn-danger" href="javascript:void(0)" data-original-title="A Title">Click to toggle popover
Four directions
Usage
Enable popovers via JavaScript:
- <a data-original-title="A Title" href="javascript:void(0)" class="Popovers btn btn-large btn-danger" rel="popover" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
- <a data-original-title="Popover on top" href="javascript:void(0)" class="Popovers btn" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</a>
- <a data-original-title="Popover on right" href="javascript:void(0)" class="Popovers btn" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on right</a>
- <a data-original-title="Popover on bottom" href="javascript:void(0)" class="Popovers btn" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on bottom</a>
- <a data-original-title="Popover on left" href="javascript:void(0)" class="Popovers btn" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on left</a>
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".
| Name | type | default | description |
|---|
| animation | boolean | true | apply a css fade transition to the tooltip |
| html | boolean | false | Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks. |
| placement | string|function | 'right' | how to position the popover - top | bottom | left | right |
| selector | string | false | if a selector is provided, tooltip objects will be delegated to the specified targets |
| trigger | string | 'click' | how popover is triggered - click | hover | focus | manual |
| title | string | function | '' | default title value if `title` attribute isn't present |
| content | string | function | '' | default content value if `data-content` attribute isn't present |
| delay | number | object | 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 Object structure is: delay: { show: 500, hide: 100 } |
Heads up! Options for individual popovers can alternatively be specified through the use of data attributes.