Enable popovers via JavaScript:
query('#example').popover(options)For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.
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 | true | Insert html into the popover. If false, dojo's NodeList 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: |
| Method | Description |
|---|---|
| destroy | Hides and destroys an element's popover. |
| hide | Hides an element's popover. |
| show | Shows an element's popover. |
| toggle | Toggles an element's popover. |
Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. Requires Tooltip to be included.
Four options are available: top, right, bottom, and left aligned.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
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.