diff options
Diffstat (limited to 'assets/stylesheets/bootstrap/_tooltip.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/_tooltip.scss | 87 |
1 files changed, 52 insertions, 35 deletions
diff --git a/assets/stylesheets/bootstrap/_tooltip.scss b/assets/stylesheets/bootstrap/_tooltip.scss index 24e198d..fe97fbb 100644 --- a/assets/stylesheets/bootstrap/_tooltip.scss +++ b/assets/stylesheets/bootstrap/_tooltip.scss @@ -3,6 +3,7 @@ position: absolute; z-index: $zindex-tooltip; display: block; + margin: $tooltip-margin; // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. // So reset our font and text properties to avoid inheriting weird values. @include reset-text(); @@ -13,62 +14,86 @@ &.show { opacity: $tooltip-opacity; } - &.tooltip-top, - &.bs-tether-element-attached-bottom { - padding: $tooltip-arrow-width 0; - margin-top: -$tooltip-margin; + .arrow { + position: absolute; + display: block; + width: $tooltip-arrow-width; + height: $tooltip-arrow-height; + } - .tooltip-inner::before { + &.bs-tooltip-top { + padding: $tooltip-arrow-width 0; + .arrow { bottom: 0; - left: 50%; - margin-left: -$tooltip-arrow-width; + } + + .arrow::before { + margin-left: -($tooltip-arrow-width - 2); content: ""; border-width: $tooltip-arrow-width $tooltip-arrow-width 0; border-top-color: $tooltip-arrow-color; } } - &.tooltip-right, - &.bs-tether-element-attached-left { + &.bs-tooltip-right { padding: 0 $tooltip-arrow-width; - margin-left: $tooltip-margin; - - .tooltip-inner::before { - top: 50%; + .arrow { left: 0; - margin-top: -$tooltip-arrow-width; + } + + .arrow::before { + 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; } } - &.tooltip-bottom, - &.bs-tether-element-attached-top { + &.bs-tooltip-bottom { padding: $tooltip-arrow-width 0; - margin-top: $tooltip-margin; - - .tooltip-inner::before { + .arrow { top: 0; - left: 50%; - margin-left: -$tooltip-arrow-width; + } + + .arrow::before { + margin-left: -($tooltip-arrow-width - 2); content: ""; border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; border-bottom-color: $tooltip-arrow-color; } } - &.tooltip-left, - &.bs-tether-element-attached-right { + &.bs-tooltip-left { padding: 0 $tooltip-arrow-width; - margin-left: -$tooltip-margin; + .arrow { + right: 0; + } - .tooltip-inner::before { - top: 50%; + .arrow::before { 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; } } + &.bs-tooltip-auto { + &[x-placement^="top"] { + @extend .bs-tooltip-top; + } + &[x-placement^="right"] { + @extend .bs-tooltip-right; + } + &[x-placement^="bottom"] { + @extend .bs-tooltip-bottom; + } + &[x-placement^="left"] { + @extend .bs-tooltip-left; + } + } + + .arrow::before { + position: absolute; + border-color: transparent; + border-style: solid; + } } // Wrapper for the tooltip content @@ -79,12 +104,4 @@ text-align: center; background-color: $tooltip-bg; @include border-radius($border-radius); - - &::before { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } } |