diff options
Diffstat (limited to 'docs/components/tooltips.md')
| -rw-r--r-- | docs/components/tooltips.md | 48 |
1 files changed, 30 insertions, 18 deletions
diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md index 55de9a886..2e630e93e 100644 --- a/docs/components/tooltips.md +++ b/docs/components/tooltips.md @@ -16,13 +16,14 @@ Inspired by the excellent Tipsy jQuery plugin written by Jason Frame. Tooltips a Things to know when using the tooltip plugin: -- Tooltips rely on the 3rd party library [Tether](http://tether.io/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for tooltips to work! +- Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js](https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.9.9/umd/popper.min.js) before bootstrap.js in order for tooltips to work! - Tooltips are opt-in for performance reasons, so **you must initialize them yourself**. - Tooltips with zero-length titles are never displayed. - Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc). - Triggering tooltips on hidden elements will not work. - Tooltips for `.disabled` or `disabled` elements must be triggered on a wrapper element. - When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use `white-space: nowrap;` on your `<a>`s to avoid this behavior. +- Tooltips must be hidden before their corresponding elements have been removed from the DOM. Got all that? Great, let's see how they work with some examples. @@ -50,22 +51,26 @@ Hover over the links below to see tooltips: Four options are available: top, right, bottom, and left aligned. <div class="bd-example bd-example-tooltip-static"> - <div class="tooltip tooltip-top" role="tooltip"> + <div class="tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip"> + <div class="arrow" x-arrow></div> <div class="tooltip-inner"> Tooltip on the top </div> </div> - <div class="tooltip tooltip-right" role="tooltip"> + <div class="tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip"> + <div class="arrow" x-arrow></div> <div class="tooltip-inner"> Tooltip on the right </div> </div> - <div class="tooltip tooltip-bottom" role="tooltip"> + <div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip"> + <div class="arrow" x-arrow></div> <div class="tooltip-inner"> Tooltip on the bottom </div> </div> - <div class="tooltip tooltip-left" role="tooltip"> + <div class="tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip"> + <div class="arrow" x-arrow></div> <div class="tooltip-inner"> Tooltip on the left </div> @@ -134,8 +139,8 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a> <!-- Generated markup by the plugin --> -<div class="tooltip tooltip-top" role="tooltip"> - <div class="tooltip-arrow"></div> +<div class="tooltip bs-tooltip-top" role="tooltip"> + <div class="arrow" x-arrow></div> <div class="tooltip-inner"> Some tooltip text! </div> @@ -195,7 +200,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <td>string | function</td> <td>'top'</td> <td> - <p>How to position the tooltip - top | bottom | left | right.</p> + <p>How to position the tooltip - auto | top | bottom | left | right.<br>When <code>auto</code> is specified, it will dynamically reorient the tooltip.</p> <p>When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the tooltip instance.</p> </td> </tr> @@ -208,11 +213,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <tr> <td>template</td> <td>string</td> - <td><code>'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'</code></td> + <td><code>'<div class="tooltip" role="tooltip"><div class="arrow" x-arrow></div><div class="tooltip-inner"></div></div>'</code></td> <td> <p>Base HTML to use when creating the tooltip.</p> <p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p> - <p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p> + <p><code>.arrow</code> will become the tooltip's arrow.</p> <p>The outermost wrapper element should have the <code>.tooltip</code> class.</p> </td> </tr> @@ -232,16 +237,17 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td> </tr> <tr> - <td>constraints</td> - <td>Array</td> - <td>[]</td> - <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td> + <td>offset</td> + <td>number | string</td> + <td>0</td> + <td>Offset of the tooltip relative to its target. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..offset.offset">offset docs</a>.</td> </tr> <tr> - <td>offset</td> - <td>string</td> - <td>'0 0'</td> - <td>Offset of the tooltip relative to its target. For more information refer to Tether's <a href="http://tether.io/#offset">offset docs</a>.</td> + <td>fallbackPlacement</td> + <td>string | array</td> + <td>'flip'</td> + <td>Allow to specify which position Popper will use on fallback. For more information refer to + Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..flip.behavior">behavior docs</a></td> </tr> </tbody> </table> @@ -303,6 +309,12 @@ Toggles the ability for an element's tooltip to be shown or hidden. {% highlight js %}$('#element').tooltip('toggleEnabled'){% endhighlight %} +#### `.tooltip('update')` + +Updates the position of an element's tooltip. + +{% highlight js %}$('#element').tooltip('update'){% endhighlight %} + ### Events <table class="table table-bordered table-striped table-responsive"> |