Fix tooltip/popover arrow size and position

diff --git a/scss/_popover.scss b/scss/_popover.scss
index 450376752b495fade40c378a75c038fa306abee3..00195323fea01fc5e12a501aa2ec43c92d397542 100644 (file)
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -26,96 +26,88 @@
     display: block;
     width: $popover-arrow-width;
     height: $popover-arrow-height;
+    margin: 0 $border-radius-lg;
   }
 
   .arrow::before,
   .arrow::after {
     position: absolute;
     display: block;
+    content: "";
     border-color: transparent;
     border-style: solid;
   }
 
-  .arrow::before {
-    content: "";
-    border-width: $popover-arrow-width;
-  }
-  .arrow::after {
-    content: "";
-    border-width: $popover-arrow-width;
-  }
-
   // Popover directions
 
   &.bs-popover-top {
-    margin-bottom: $popover-arrow-width;
+    margin-bottom: $popover-arrow-height;
 
     .arrow {
-      bottom: 0;
+      bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
     }
 
     .arrow::before,
     .arrow::after {
-      border-bottom-width: 0;
+      border-width: $popover-arrow-height $popover-arrow-width/2 0;
     }
 
     .arrow::before {
-      bottom: -$popover-arrow-width;
-      margin-left: -$popover-arrow-width;
+      bottom: 0;
       border-top-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
-      bottom: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
-      margin-left: -$popover-arrow-width;
+      bottom: $popover-border-width;
       border-top-color: $popover-arrow-color;
     }
   }
 
   &.bs-popover-right {
-    margin-left: $popover-arrow-width;
+    margin-left: $popover-arrow-height;
 
     .arrow {
-      left: 0;
+      left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
+      width: $popover-arrow-height;
+      height: $popover-arrow-width;
+      margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
     }
 
     .arrow::before,
     .arrow::after {
-      margin-top: -$popover-arrow-width;
-      border-left-width: 0;
+      border-width: $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2 0;
     }
 
     .arrow::before {
-      left: -$popover-arrow-width;
+      left: 0;
       border-right-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
-      left: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
+      left: $popover-border-width;
       border-right-color: $popover-arrow-color;
     }
   }
 
   &.bs-popover-bottom {
-    margin-top: $popover-arrow-width;
+    margin-top: $popover-arrow-height;
 
     .arrow {
-      top: 0;
+      top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
     }
 
     .arrow::before,
     .arrow::after {
-      margin-left: -$popover-arrow-width;
-      border-top-width: 0;
+      border-width: 0 $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2;
     }
 
     .arrow::before {
-      top: -$popover-arrow-width;
+      top: 0;
       border-bottom-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
-      top: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
+      top: $popover-border-width;
       border-bottom-color: $popover-arrow-color;
     }
 
@@ -125,33 +117,35 @@
       top: 0;
       left: 50%;
       display: block;
-      width: 20px;
-      margin-left: -10px;
+      width: $popover-arrow-width;
+      margin-left: -$popover-arrow-width/2;
       content: "";
       border-bottom: $popover-border-width solid $popover-header-bg;
     }
   }
 
   &.bs-popover-left {
-    margin-right: $popover-arrow-width;
+    margin-right: $popover-arrow-height;
 
     .arrow {
-      right: 0;
+      right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
+      width: $popover-arrow-height;
+      height: $popover-arrow-width;
+      margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
     }
 
     .arrow::before,
     .arrow::after {
-      margin-top: -$popover-arrow-width;
-      border-right-width: 0;
+      border-width: $popover-arrow-width/2 0 $popover-arrow-width/2 $popover-arrow-height;
     }
 
     .arrow::before {
-      right: -$popover-arrow-width;
+      right: 0;
       border-left-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
-      right: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
+      right: $popover-border-width;
       border-left-color: $popover-arrow-color;
     }
   }

diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index b03139c9117624b09e437b81290dc8e96bc064ab..62d3e8a980a33efd460bb6b946ac1113dc2ec073 100644 (file)
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -28,55 +28,58 @@
   }
 
   &.bs-tooltip-top {
-    padding: $tooltip-arrow-width 0;
+    padding: $tooltip-arrow-height 0;
     .arrow {
       bottom: 0;
     }
 
     .arrow::before {
-      margin-left: -$tooltip-arrow-width;
+      top: 0;
       content: "";
-      border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
+      border-width: $tooltip-arrow-height $tooltip-arrow-width/2 0;
       border-top-color: $tooltip-arrow-color;
     }
   }
   &.bs-tooltip-right {
-    padding: 0 $tooltip-arrow-width;
+    padding: 0 $tooltip-arrow-height;
     .arrow {
       left: 0;
+      width: $tooltip-arrow-height;
+      height: $tooltip-arrow-width;
     }
 
     .arrow::before {
-      margin-top: -$tooltip-arrow-width;
+      right: 0;
       content: "";
-      border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
+      border-width: $tooltip-arrow-width/2 $tooltip-arrow-height $tooltip-arrow-width/2 0;
       border-right-color: $tooltip-arrow-color;
     }
   }
   &.bs-tooltip-bottom {
-    padding: $tooltip-arrow-width 0;
+    padding: $tooltip-arrow-height 0;
     .arrow {
       top: 0;
     }
 
     .arrow::before {
-      margin-left: -$tooltip-arrow-width;
+      bottom: 0;
       content: "";
-      border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
+      border-width: 0 $tooltip-arrow-width/2 $tooltip-arrow-height;
       border-bottom-color: $tooltip-arrow-color;
     }
   }
   &.bs-tooltip-left {
-    padding: 0 $tooltip-arrow-width;
+    padding: 0 $tooltip-arrow-height;
     .arrow {
       right: 0;
+      width: $tooltip-arrow-height;
+      height: $tooltip-arrow-width;
     }
 
     .arrow::before {
-      right: 0;
-      margin-top: -($tooltip-arrow-width);
+      left: 0;
       content: "";
-      border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
+      border-width: $tooltip-arrow-width/2 0 $tooltip-arrow-width/2 $tooltip-arrow-height;
       border-left-color: $tooltip-arrow-color;
     }
   }

diff --git a/scss/_variables.scss b/scss/_variables.scss
index be3dd69b5f39cfb92cafc344285fb5e5d5a78d12..f44d975da6f768240e5549654fa4b8cfd921de79 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -682,8 +682,8 @@ $tooltip-padding-y:           .25rem !default;
 $tooltip-padding-x:           .5rem !default;
 $tooltip-margin:              0 !default;
 
-$tooltip-arrow-width:         .4rem !default;
-$tooltip-arrow-height:        $tooltip-arrow-width !default;
+$tooltip-arrow-width:         .8rem !default;
+$tooltip-arrow-height:        .4rem !default;
 $tooltip-arrow-color:         $tooltip-bg !default;
 
 
@@ -704,8 +704,8 @@ $popover-body-color:                $body-color !default;
 $popover-body-padding-y:            $popover-header-padding-y !default;
 $popover-body-padding-x:            $popover-header-padding-x !default;
 
-$popover-arrow-width:               .8rem !default;
-$popover-arrow-height:              .4rem !default;
+$popover-arrow-width:               1.6rem !default;
+$popover-arrow-height:              .8rem !default;
 $popover-arrow-color:               $popover-bg !default;
 
 $popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;