diff options
| author | Johann-S <johann.servoire@gmail.com> | 2017-05-23 15:17:07 +0300 |
|---|---|---|
| committer | Johann-S <johann.servoire@gmail.com> | 2017-05-23 16:19:54 +0300 |
| commit | aa36439e173720701c6eac1929c699056714df9c (patch) | |
| tree | ff57ca9048de4f793b5ae402ddb966a400bfb595 /scss/_tooltip.scss | |
| parent | 3706c88348781869c9739b8bbfe078ecb044caf8 (diff) | |
Use Popper.js to manage arrow position
Diffstat (limited to 'scss/_tooltip.scss')
| -rw-r--r-- | scss/_tooltip.scss | 36 |
1 files changed, 23 insertions, 13 deletions
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; } |