From aa36439e173720701c6eac1929c699056714df9c Mon Sep 17 00:00:00 2001 From: Johann-S Date: Tue, 23 May 2017 14:17:07 +0200 Subject: [PATCH] Use Popper.js to manage arrow position --- js/src/popover.js | 2 +- js/src/tooltip.js | 2 +- scss/_popover.scss | 46 +++++++++++++++++++++++++++++--------------- scss/_tooltip.scss | 36 +++++++++++++++++++++------------- scss/_variables.scss | 3 +++ 5 files changed, 58 insertions(+), 31 deletions(-) diff --git a/js/src/popover.js b/js/src/popover.js index f89d3d5c8b..6c9d786647 100644 --- a/js/src/popover.js +++ b/js/src/popover.js @@ -30,7 +30,7 @@ const Popover = (($) => { trigger : 'click', content : '', template : '' }) diff --git a/js/src/tooltip.js b/js/src/tooltip.js index f447ed4ced..ceb9bc04cc 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -60,7 +60,7 @@ const Tooltip = (($) => { const Default = { animation : true, template : '', trigger : 'hover focus', title : '', diff --git a/scss/_popover.scss b/scss/_popover.scss index 8af1c1fab8..53b5593332 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -20,14 +20,19 @@ // Arrows // - // .popover-arrow is outer, .popover-arrow::after is inner + // .arrow is outer, .arrow::after is inner + + .arrow { + position: absolute; + display: block; + width: $popover-arrow-width; + height: $popover-arrow-height; + } .arrow::before, .arrow::after { position: absolute; display: block; - width: 0; - height: 0; border-color: transparent; border-style: solid; } @@ -38,7 +43,7 @@ } .arrow::after { content: ""; - border-width: $popover-arrow-width; + border-width: $popover-arrow-outer-width; } // Popover directions @@ -46,21 +51,24 @@ &.bs-popover-top { margin-bottom: $popover-arrow-width; + .arrow { + bottom: 0; + } + .arrow::before, .arrow::after { - left: 50%; border-bottom-width: 0; } .arrow::before { bottom: -$popover-arrow-outer-width; - margin-left: -$popover-arrow-outer-width; + margin-left: -($popover-arrow-outer-width - 5); border-top-color: $popover-arrow-outer-color; } .arrow::after { bottom: -($popover-arrow-outer-width - 1); - margin-left: -$popover-arrow-width; + margin-left: -($popover-arrow-outer-width - 5); border-top-color: $popover-arrow-color; } } @@ -68,21 +76,23 @@ &.bs-popover-right { margin-left: $popover-arrow-width; + .arrow { + left: 0; + } + .arrow::before, .arrow::after { - top: 50%; + margin-top: -($popover-arrow-outer-width - 3); border-left-width: 0; } .arrow::before { left: -$popover-arrow-outer-width; - margin-top: -$popover-arrow-outer-width; border-right-color: $popover-arrow-outer-color; } .arrow::after { left: -($popover-arrow-outer-width - 1); - margin-top: -($popover-arrow-outer-width - 1); border-right-color: $popover-arrow-color; } } @@ -90,21 +100,23 @@ &.bs-popover-bottom { margin-top: $popover-arrow-width; + .arrow { + top: 0; + } + .arrow::before, .arrow::after { - left: 50%; + margin-left: -($popover-arrow-width - 3); border-top-width: 0; } .arrow::before { top: -$popover-arrow-outer-width; - margin-left: -$popover-arrow-outer-width; border-bottom-color: $popover-arrow-outer-color; } .arrow::after { top: -($popover-arrow-outer-width - 1); - margin-left: -$popover-arrow-width; border-bottom-color: $popover-arrow-color; } @@ -124,21 +136,23 @@ &.bs-popover-left { margin-right: $popover-arrow-width; + .arrow { + right: 0; + } + .arrow::before, .arrow::after { - top: 50%; + margin-top: -($popover-arrow-outer-width - 3); border-right-width: 0; } .arrow::before { right: -$popover-arrow-outer-width; - margin-top: -$popover-arrow-outer-width; border-left-color: $popover-arrow-outer-color; } .arrow::after { right: -($popover-arrow-outer-width - 1); - margin-top: -($popover-arrow-outer-width - 1); border-left-color: $popover-arrow-color; } } diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index 4eaaa1c58f..c62ce9779f 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -14,13 +14,21 @@ &.show { opacity: $tooltip-opacity; } + .arrow { + position: absolute; + display: block; + width: $tooltip-arrow-width; + height: $tooltip-arrow-height; + } + &.bs-tooltip-top { padding: $tooltip-arrow-width 0; + .arrow { + bottom: 0; + } .arrow::before { - bottom: 0; - left: 50%; - margin-left: -$tooltip-arrow-width; + margin-left: -($tooltip-arrow-width - 2); content: ""; border-width: $tooltip-arrow-width $tooltip-arrow-width 0; border-top-color: $tooltip-arrow-color; @@ -28,11 +36,12 @@ } &.bs-tooltip-right { padding: 0 $tooltip-arrow-width; + .arrow { + left: 0; + } .arrow::before { - top: 50%; - left: 0; - margin-top: -$tooltip-arrow-width; + margin-top: -($tooltip-arrow-width - 2); content: ""; border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; border-right-color: $tooltip-arrow-color; @@ -40,11 +49,12 @@ } &.bs-tooltip-bottom { padding: $tooltip-arrow-width 0; + .arrow { + top: 0; + } .arrow::before { - top: 0; - left: 50%; - margin-left: -$tooltip-arrow-width; + margin-left: -($tooltip-arrow-width - 2); content: ""; border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; border-bottom-color: $tooltip-arrow-color; @@ -52,11 +62,13 @@ } &.bs-tooltip-left { padding: 0 $tooltip-arrow-width; + .arrow { + right: 0; + } .arrow::before { - top: 50%; right: 0; - margin-top: -$tooltip-arrow-width; + margin-top: -($tooltip-arrow-width - 2); content: ""; border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; border-left-color: $tooltip-arrow-color; @@ -65,8 +77,6 @@ .arrow::before { position: absolute; - width: 0; - height: 0; border-color: transparent; border-style: solid; } diff --git a/scss/_variables.scss b/scss/_variables.scss index 1bcabdc472..d62990fb81 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -698,7 +698,9 @@ $tooltip-padding-y: 3px !default; $tooltip-padding-x: 8px !default; $tooltip-margin: 0 !default; + $tooltip-arrow-width: 5px !default; +$tooltip-arrow-height: 5px !default; $tooltip-arrow-color: $tooltip-bg !default; @@ -721,6 +723,7 @@ $popover-content-padding-y: 9px !default; $popover-content-padding-x: 14px !default; $popover-arrow-width: 10px !default; +$popover-arrow-height: 5px !default; $popover-arrow-color: $popover-bg !default; $popover-arrow-outer-width: ($popover-arrow-width + 1px) !default; -- 2.47.2