From 9600ab10031b260c16deef891a9d1c13f7ff6b01 Mon Sep 17 00:00:00 2001
From: simonihmig <ihmig@kaliber5.de>
Date: Sat, 23 Dec 2017 01:57:08 +0100
Subject: Fix tooltip/popover arrow size and position

---
 scss/_popover.scss   | 66 ++++++++++++++++++++++++----------------------------
 scss/_tooltip.scss   | 29 ++++++++++++-----------
 scss/_variables.scss |  8 +++----
 3 files changed, 50 insertions(+), 53 deletions(-)

diff --git a/scss/_popover.scss b/scss/_popover.scss
index 450376752b..00195323fe 100644
--- 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 b03139c911..62d3e8a980 100644
--- 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 be3dd69b5f..f44d975da6 100644
--- 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;
-- 
cgit v1.2.3