From cbd333185e3407c6c0b8ade77ff4bb8be8238045 Mon Sep 17 00:00:00 2001 From: Peter Blazejewicz Date: Mon, 11 Feb 2019 11:27:14 +0100 Subject: [PATCH] Use consistent arrow class (#28105) --- js/src/popover.js | 2 +- js/src/tooltip.js | 6 +++--- js/tests/unit/popover.js | 2 +- scss/_popover.scss | 10 +++++----- scss/_tooltip.scss | 10 +++++----- site/docs/4.3/components/popovers.md | 4 ++-- 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 : '' } 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 : '', 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: '

' + template: '

' }) .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 template string - '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' + '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML to use when creating the popover.

The popover's title will be injected into the .popover-header.

The popover's content will be injected into the .popover-body.

-

.arrow will become the popover's arrow.

+

.popover-arrow will become the popover's arrow.

The outermost wrapper element should have the .popover class.

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