<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
<table class="table table-bordered table-striped">
<thead>
- <tr>
- <th style="width: 100px;">Name</th>
- <th style="width: 100px;">type</th>
- <th style="width: 50px;">default</th>
- <th>description</th>
- </tr>
+ <tr>
+ <th style="width: 100px;">Name</th>
+ <th style="width: 100px;">type</th>
+ <th style="width: 50px;">default</th>
+ <th>description</th>
+ </tr>
</thead>
<tbody>
- <tr>
- <td>animation</td>
- <td>boolean</td>
- <td>true</td>
- <td>apply a css fade transition to the tooltip</td>
- </tr>
- <tr>
- <td>html</td>
- <td>boolean</td>
- <td>false</td>
- <td>Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td>
- </tr>
- <tr>
- <td>placement</td>
- <td>string | function</td>
- <td>'right'</td>
- <td>how to position the popover - top | bottom | left | right</td>
- </tr>
- <tr>
- <td>selector</td>
- <td>string</td>
- <td>false</td>
- <td>if a selector is provided, tooltip objects will be delegated to the specified targets</td>
- </tr>
- <tr>
- <td>trigger</td>
- <td>string</td>
- <td>'click'</td>
- <td>how popover is triggered - click | hover | focus | manual</td>
- </tr>
- <tr>
- <td>title</td>
- <td>string | function</td>
- <td>''</td>
- <td>default title value if `title` attribute isn't present</td>
- </tr>
- <tr>
- <td>content</td>
- <td>string | function</td>
- <td>''</td>
- <td>default content value if `data-content` attribute isn't present</td>
- </tr>
- <tr>
- <td>delay</td>
- <td>number | object</td>
- <td>0</td>
- <td>
- <p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
- <p>If a number is supplied, delay is applied to both hide/show</p>
- <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
- </td>
- </tr>
- <tr>
- <td>container</td>
- <td>string | false</td>
- <td>false</td>
- <td>
- <p>Appends the popover to a specific element <code>container: 'body'</code></p>
- </td>
- </tr>
+ <tr>
+ <td>animation</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>apply a css fade transition to the tooltip</td>
+ </tr>
+ <tr>
+ <td>html</td>
+ <td>boolean</td>
+ <td>false</td>
+ <td>Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td>
+ </tr>
+ <tr>
+ <td>placement</td>
+ <td>string | function</td>
+ <td>'right'</td>
+ <td>how to position the popover - top | bottom | left | right</td>
+ </tr>
+ <tr>
+ <td>selector</td>
+ <td>string</td>
+ <td>false</td>
+ <td>if a selector is provided, tooltip objects will be delegated to the specified targets if a selector is provided, tooltip objects will be delegated to the specified targets. in practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twitter/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/KPeKS/4/">an informative example</a>.</td>
+ </tr>
+ <tr>
+ <td>trigger</td>
+ <td>string</td>
+ <td>'click'</td>
+ <td>how popover is triggered - click | hover | focus | manual</td>
+ </tr>
+ <tr>
+ <td>title</td>
+ <td>string | function</td>
+ <td>''</td>
+ <td>default title value if `title` attribute isn't present</td>
+ </tr>
+ <tr>
+ <td>content</td>
+ <td>string | function</td>
+ <td>''</td>
+ <td>default content value if `data-content` attribute isn't present</td>
+ </tr>
+ <tr>
+ <td>delay</td>
+ <td>number | object</td>
+ <td>0</td>
+ <td>
+ <p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
+ <p>If a number is supplied, delay is applied to both hide/show</p>
+ <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
+ </td>
+ </tr>
+ <tr>
+ <td>container</td>
+ <td>string | false</td>
+ <td>false</td>
+ <td>
+ <p>Appends the popover to a specific element <code>container: 'body'</code></p>
+ </td>
+ </tr>
</tbody>
</table>
<div class="bs-docs-sidenote">