diff options
| -rw-r--r-- | js/src/popover.js | 2 | ||||
| -rw-r--r-- | js/src/tooltip.js | 6 | ||||
| -rw-r--r-- | js/tests/unit/popover.js | 2 | ||||
| -rw-r--r-- | scss/_popover.scss | 10 | ||||
| -rw-r--r-- | scss/_tooltip.scss | 10 | ||||
| -rw-r--r-- | site/docs/4.3/components/popovers.md | 4 | ||||
| -rw-r--r-- | site/docs/4.3/components/tooltips.md | 6 |
7 files changed, 20 insertions, 20 deletions
diff --git a/js/src/popover.js b/js/src/popover.js index 36640407b7..ce5edcd5c4 100644 --- a/js/src/popover.js +++ b/js/src/popover.js @@ -29,7 +29,7 @@ const Default = { trigger : 'click', content : '', template : '<div class="popover" role="tooltip">' + - '<div class="arrow"></div>' + + '<div class="popover-arrow"></div>' + '<h3 class="popover-header"></h3>' + '<div class="popover-body"></div></div>' } diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 43c11aa1d9..8c2dbe7b23 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -60,7 +60,7 @@ const AttachmentMap = { const Default = { animation : true, template : '<div class="tooltip" role="tooltip">' + - '<div class="arrow"></div>' + + '<div class="tooltip-arrow"></div>' + '<div class="tooltip-inner"></div></div>', trigger : 'hover focus', title : '', @@ -103,7 +103,7 @@ const ClassName = { const Selector = { TOOLTIP : '.tooltip', TOOLTIP_INNER : '.tooltip-inner', - ARROW : '.arrow' + TOOLTIP_ARROW : '.tooltip-arrow' } const Trigger = { @@ -302,7 +302,7 @@ class Tooltip { behavior: this.config.fallbackPlacement }, arrow: { - element: Selector.ARROW + element: Selector.TOOLTIP_ARROW }, preventOverflow: { boundariesElement: this.config.boundary diff --git a/js/tests/unit/popover.js b/js/tests/unit/popover.js index 9f267894d2..bc94a17978 100644 --- a/js/tests/unit/popover.js +++ b/js/tests/unit/popover.js @@ -239,7 +239,7 @@ $(function () { .bootstrapPopover({ title: 'Test', content: 'Test', - template: '<div class="popover foobar"><div class="arrow"></div><div class="inner"><h3 class="title"/><div class="content"><p/></div></div></div>' + template: '<div class="popover foobar"><div class="popover-arrow"></div><div class="inner"><h3 class="title"/><div class="content"><p/></div></div></div>' }) .one('shown.bs.popover', function () { assert.notEqual($('.popover').length, 0, 'popover was inserted') diff --git a/scss/_popover.scss b/scss/_popover.scss index f205e66818..fe70dd071f 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -17,7 +17,7 @@ @include border-radius($popover-border-radius); @include box-shadow($popover-box-shadow); - .arrow { + .popover-arrow { position: absolute; display: block; width: $popover-arrow-width; @@ -38,7 +38,7 @@ .bs-popover-top { margin-bottom: $popover-arrow-height; - > .arrow { + > .popover-arrow { bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); &::before { @@ -58,7 +58,7 @@ .bs-popover-right { margin-left: $popover-arrow-height; - > .arrow { + > .popover-arrow { left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); width: $popover-arrow-height; height: $popover-arrow-width; @@ -81,7 +81,7 @@ .bs-popover-bottom { margin-top: $popover-arrow-height; - > .arrow { + > .popover-arrow { top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); &::before { @@ -113,7 +113,7 @@ .bs-popover-left { margin-right: $popover-arrow-height; - > .arrow { + > .popover-arrow { right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); width: $popover-arrow-height; height: $popover-arrow-width; diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index 6b3aa62dd6..4d405e0319 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -14,7 +14,7 @@ &.show { opacity: $tooltip-opacity; } - .arrow { + .tooltip-arrow { position: absolute; display: block; width: $tooltip-arrow-width; @@ -32,7 +32,7 @@ .bs-tooltip-top { padding: $tooltip-arrow-height 0; - .arrow { + .tooltip-arrow { bottom: 0; &::before { @@ -46,7 +46,7 @@ .bs-tooltip-right { padding: 0 $tooltip-arrow-height; - .arrow { + .tooltip-arrow { left: 0; width: $tooltip-arrow-height; height: $tooltip-arrow-width; @@ -62,7 +62,7 @@ .bs-tooltip-bottom { padding: $tooltip-arrow-height 0; - .arrow { + .tooltip-arrow { top: 0; &::before { @@ -76,7 +76,7 @@ .bs-tooltip-left { padding: 0 $tooltip-arrow-height; - .arrow { + .tooltip-arrow { right: 0; width: $tooltip-arrow-height; height: $tooltip-arrow-width; diff --git a/site/docs/4.3/components/popovers.md b/site/docs/4.3/components/popovers.md index d648c64753..3dd14a52e5 100644 --- a/site/docs/4.3/components/popovers.md +++ b/site/docs/4.3/components/popovers.md @@ -212,12 +212,12 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti <tr> <td>template</td> <td>string</td> - <td><code>'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'</code></td> + <td><code>'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></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-header</code>.</p> <p>The popover's <code>content</code> will be injected into the <code>.popover-body</code>.</p> - <p><code>.arrow</code> will become the popover's arrow.</p> + <p><code>.popover-arrow</code> will become the popover's arrow.</p> <p>The outermost wrapper element should have the <code>.popover</code> class.</p> </td> </tr> diff --git a/site/docs/4.3/components/tooltips.md b/site/docs/4.3/components/tooltips.md index 2fe90a6713..3ddd0e06ab 100644 --- a/site/docs/4.3/components/tooltips.md +++ b/site/docs/4.3/components/tooltips.md @@ -119,7 +119,7 @@ Additionally, do not rely solely on `hover` as the trigger for your tooltip, as <!-- Generated markup by the plugin --> <div class="tooltip bs-tooltip-top" role="tooltip"> - <div class="arrow"></div> + <div class="tooltip-arrow"></div> <div class="tooltip-inner"> Some tooltip text! </div> @@ -210,11 +210,11 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti <tr> <td>template</td> <td>string</td> - <td><code>'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'</code></td> + <td><code>'<div class="tooltip" role="tooltip"><div class="tooltip-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>.arrow</code> will become the tooltip's arrow.</p> + <p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p> <p>The outermost wrapper element should have the <code>.tooltip</code> class and <code>role="tooltip"</code>.</p> </td> </tr> |