Skip to content
GitLab
Commit a40ff40b authored by Chris Rebert's avatar Chris Rebert
Browse files

Merge pull request #13601 from twbs/tooltip-popover-doc 

Sync tooltip & popover docs
parents f6bebbd8 00fcf072
Hide whitespace changes
Inline Side-by-side
Showing
with 60 additions and 52 deletions
+60 -52
docs/_includes/js/popovers.html
+ 41
- 33
View file @ a40ff40b
...@@ -151,6 +151,33 @@ $('.popover-dismiss').popover({ ...@@ -151,6 +151,33 @@ $('.popover-dismiss').popover({
<td>true</td> <td>true</td>
<td>Apply a CSS fade transition to the popover</td> <td>Apply a CSS fade transition to the popover</td>
</tr> </tr>
<tr>
<td>container</td>
<td>string | false</td>
<td>false</td>
<td>
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p>
</td>
</tr>
<tr>
<td>content</td>
<td>string | function</td>
<td>''</td>
<td>
<p>Default content value if <code>data-content</code> attribute isn't present.</p>
<p>If a function is given, it will be called with 1 argument, which is the element that the popover is attached to.</p>
</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> <tr>
<td>html</td> <td>html</td>
<td>boolean</td> <td>boolean</td>
...@@ -169,22 +196,10 @@ $('.popover-dismiss').popover({ ...@@ -169,22 +196,10 @@ $('.popover-dismiss').popover({
<td>false</td> <td>false</td>
<td>If a selector is provided, popover 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/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td> <td>If a selector is provided, popover 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/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td>
</tr> </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 <code>title</code> attribute isn't present</td>
</tr>
<tr> <tr>
<td>template</td> <td>template</td>
<td>string</td> <td>string</td>
<td><code>'&lt;div class="popover"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td> <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
<td> <td>
<p>Base HTML to use when creating the popover.</p> <p>Base HTML to use when creating the popover.</p>
<p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p> <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p>
...@@ -194,32 +209,25 @@ $('.popover-dismiss').popover({ ...@@ -194,32 +209,25 @@ $('.popover-dismiss').popover({
</td> </td>
</tr> </tr>
<tr> <tr>
<td>content</td> <td>title</td>
<td>string | function</td> <td>string | function</td>
<td>''</td> <td>''</td>
<td> <td>Default title value if <code>title</code> attribute isn't present</td>
<p>Default content value if <code>data-content</code> attribute isn't present.</p>
<p>If a function is given, it will be called with 1 argument, which is the element that the popover is attached to.</p>
</td>
</tr> </tr>
<tr> <tr>
<td>delay</td> <td>trigger</td>
<td>number | object</td> <td>string</td>
<td>0</td> <td>'click'</td>
<td> <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</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>
<tr> <tr>
<td>container</td> <td>viewport</td>
<td>string | false</td> <td>string | object</td>
<td>false</td> <td>{ selector: 'body', padding: 0 }</td>
<td> <td>
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p> <p>Keeps the popover within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ selector: '#viewport', padding: 0 }</code></p>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.table-responsive --> </div><!-- /.table-responsive -->
......
docs/_includes/js/tooltips.html
+ 19
- 19
View file @ a40ff40b
...@@ -90,6 +90,24 @@ $('#example').tooltip(options) ...@@ -90,6 +90,24 @@ $('#example').tooltip(options)
<td>true</td> <td>true</td>
<td>Apply a CSS fade transition to the tooltip</td> <td>Apply a CSS fade transition to the tooltip</td>
</tr> </tr>
<tr>
<td>container</td>
<td>string | false</td>
<td>false</td>
<td>
<p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.</p>
</td>
</tr>
<tr>
<td>delay</td>
<td>number | object</td>
<td>0</td>
<td>
<p>Delay showing and hiding the tooltip (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> <tr>
<td>html</td> <td>html</td>
<td>boolean</td> <td>boolean</td>
...@@ -106,7 +124,7 @@ $('#example').tooltip(options) ...@@ -106,7 +124,7 @@ $('#example').tooltip(options)
<td>selector</td> <td>selector</td>
<td>string</td> <td>string</td>
<td>false</td> <td>false</td>
<td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td> <td>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 tooltips added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td>
</tr> </tr>
<tr> <tr>
<td>template</td> <td>template</td>
...@@ -131,24 +149,6 @@ $('#example').tooltip(options) ...@@ -131,24 +149,6 @@ $('#example').tooltip(options)
<td>'hover focus'</td> <td>'hover focus'</td>
<td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td> <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
</tr> </tr>
<tr>
<td>delay</td>
<td>number | object</td>
<td>0</td>
<td>
<p>Delay showing and hiding the tooltip (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 tooltip to a specific element. Example: <code>container: 'body'</code></p>
</td>
</tr>
<tr> <tr>
<td>viewport</td> <td>viewport</td>
<td>string | object</td> <td>string | object</td>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment