diff options
| -rw-r--r-- | docs/components/popovers.md | 10 | ||||
| -rw-r--r-- | docs/components/tooltips.md | 12 | ||||
| -rw-r--r-- | js/src/popover.js | 2 | ||||
| -rw-r--r-- | js/src/tooltip.js | 22 |
4 files changed, 25 insertions, 21 deletions
diff --git a/docs/components/popovers.md b/docs/components/popovers.md index 614be7e2b..d923eb291 100644 --- a/docs/components/popovers.md +++ b/docs/components/popovers.md @@ -57,7 +57,7 @@ Four options are available: top, right, bottom, and left aligned. <div class="bd-example bd-example-popover-static"> <div class="popover bs-popover-top bs-popover-top-docs"> - <div class="arrow" x-arrow></div> + <div class="arrow"></div> <h3 class="popover-title">Popover top</h3> <div class="popover-content"> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> @@ -65,7 +65,7 @@ Four options are available: top, right, bottom, and left aligned. </div> <div class="popover bs-popover-right bs-popover-right-docs"> - <div class="arrow" x-arrow></div> + <div class="arrow"></div> <h3 class="popover-title">Popover right</h3> <div class="popover-content"> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> @@ -73,7 +73,7 @@ Four options are available: top, right, bottom, and left aligned. </div> <div class="popover bs-popover-bottom bs-popover-bottom-docs"> - <div class="arrow" x-arrow></div> + <div class="arrow"></div> <h3 class="popover-title">Popover bottom</h3> <div class="popover-content"> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> @@ -81,7 +81,7 @@ Four options are available: top, right, bottom, and left aligned. </div> <div class="popover bs-popover-left bs-popover-left-docs"> - <div class="arrow" x-arrow></div> + <div class="arrow"></div> <h3 class="popover-title">Popover left</h3> <div class="popover-content"> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> @@ -234,7 +234,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <tr> <td>template</td> <td>string</td> - <td><code>'<div class="popover" role="tooltip"><div class="arrow" x-arrow></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'</code></td> + <td><code>'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'</code></td> <td> <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> diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md index 2e630e93e..739ba608a 100644 --- a/docs/components/tooltips.md +++ b/docs/components/tooltips.md @@ -52,25 +52,25 @@ Four options are available: top, right, bottom, and left aligned. <div class="bd-example bd-example-tooltip-static"> <div class="tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip"> - <div class="arrow" x-arrow></div> + <div class="arrow"></div> <div class="tooltip-inner"> Tooltip on the top </div> </div> <div class="tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip"> - <div class="arrow" x-arrow></div> + <div class="arrow"></div> <div class="tooltip-inner"> Tooltip on the right </div> </div> <div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip"> - <div class="arrow" x-arrow></div> + <div class="arrow"></div> <div class="tooltip-inner"> Tooltip on the bottom </div> </div> <div class="tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip"> - <div class="arrow" x-arrow></div> + <div class="arrow"></div> <div class="tooltip-inner"> Tooltip on the left </div> @@ -140,7 +140,7 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo <!-- Generated markup by the plugin --> <div class="tooltip bs-tooltip-top" role="tooltip"> - <div class="arrow" x-arrow></div> + <div class="arrow"></div> <div class="tooltip-inner"> Some tooltip text! </div> @@ -213,7 +213,7 @@ 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="arrow" x-arrow></div><div class="tooltip-inner"></div></div>'</code></td> + <td><code>'<div class="tooltip" role="tooltip"><div class="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> diff --git a/js/src/popover.js b/js/src/popover.js index a068420d6..13c109b2c 100644 --- a/js/src/popover.js +++ b/js/src/popover.js @@ -30,7 +30,7 @@ const Popover = (($) => { trigger : 'click', content : '', template : '<div class="popover" role="tooltip">' - + '<div class="arrow" x-arrow></div>' + + '<div class="arrow"></div>' + '<h3 class="popover-title"></h3>' + '<div class="popover-content"></div></div>' }) diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 1d53b0470..c7c7b9f9d 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -61,7 +61,7 @@ const Tooltip = (($) => { const Default = { animation : true, template : '<div class="tooltip" role="tooltip">' - + '<div class="arrow" x-arrow></div>' + + '<div class="arrow"></div>' + '<div class="tooltip-inner"></div></div>', trigger : 'hover focus', title : '', @@ -99,7 +99,8 @@ const Tooltip = (($) => { const Selector = { TOOLTIP : '.tooltip', - TOOLTIP_INNER : '.tooltip-inner' + TOOLTIP_INNER : '.tooltip-inner', + ARROW : '.arrow' } const Trigger = { @@ -288,16 +289,19 @@ const Tooltip = (($) => { $(this.element).trigger(this.constructor.Event.INSERTED) this._popper = new Popper(this.element, tip, { - placement : attachment, - modifiers : { - offset : { - offset : this.config.offset + placement: attachment, + modifiers: { + offset: { + offset: this.config.offset }, - flip : { - behavior : this.config.fallbackPlacement + flip: { + behavior: this.config.fallbackPlacement + }, + arrow: { + element: Selector.ARROW } }, - onCreate : (data) => { + onCreate: (data) => { if (data.originalPlacement !== data.placement) { this._handlePopperPlacementChange(data) } |