From da432645d18dc273e61c8ef3b33fde2822e98f6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Tue, 4 Feb 2020 23:52:43 +0100
Subject: [PATCH] fix(b-tooltip): fix arrow margin

---
 src/components/popover/README.md     | 48 ++++++++++++++--------------
 src/components/tooltip/README.md     | 44 ++++++++++++-------------
 src/components/tooltip/_tooltip.scss | 11 +++++++
 src/directives/popover/README.md     | 48 ++++++++++++++--------------
 src/directives/tooltip/README.md     | 44 ++++++++++++-------------
 5 files changed, 103 insertions(+), 92 deletions(-)

diff --git a/src/components/popover/README.md b/src/components/popover/README.md
index 2b53f3e6159..3bccd6f360b 100644
--- a/src/components/popover/README.md
+++ b/src/components/popover/README.md
@@ -47,24 +47,24 @@ Twelve options are available for positioning: `top`, `topleft`, `topright`, `rig
 Positioning is relative to the trigger element.
 
 <div class="bd-example bd-example-popover-static">
-  <div class="popover bs-popover-top bs-popover-top-docs">
-    <div class="arrow" style="left: calc(50% - 6px)"></div>
+  <div class="popover b-popover bs-popover-top bs-popover-top-docs">
+    <div class="arrow" style="left: calc(50% - 8px)"></div>
     <h3 class="popover-header">Popover top</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
       quam venenatis vestibulum.
     </div>
   </div>
-  <div class="popover bs-popover-top bs-popover-top-docs">
-    <div class="arrow" style="right: 6px"></div>
+  <div class="popover b-popover bs-popover-top bs-popover-top-docs">
+    <div class="arrow" style="right: 0px"></div>
     <h3 class="popover-header">Popover topleft</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
       quam venenatis vestibulum.
     </div>
   </div>
-  <div class="popover bs-popover-top bs-popover-top-docs">
-    <div class="arrow" style="left: 6px"></div>
+  <div class="popover b-popover bs-popover-top bs-popover-top-docs">
+    <div class="arrow" style="left: 0px"></div>
     <h3 class="popover-header">Popover topright</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
@@ -72,24 +72,24 @@ Positioning is relative to the trigger element.
     </div>
   </div>
 
-  <div class="popover bs-popover-right bs-popover-right-docs">
-    <div class="arrow" style="top: calc(50% - 8px)"></div>
+  <div class="popover b-popover bs-popover-right bs-popover-right-docs">
+    <div class="arrow" style="top: calc(50% - 4px)"></div>
     <h3 class="popover-header">Popover right</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
       quam venenatis vestibulum.
     </div>
   </div>
-  <div class="popover bs-popover-right bs-popover-right-docs">
-    <div class="arrow" style="bottom: 4px"></div>
+  <div class="popover b-popover bs-popover-right bs-popover-right-docs">
+    <div class="arrow" style="bottom: 0px"></div>
     <h3 class="popover-header">Popover righttop</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
       quam venenatis vestibulum.
     </div>
   </div>
-  <div class="popover bs-popover-right bs-popover-right-docs">
-    <div class="arrow" style="top: 4px"></div>
+  <div class="popover b-popover bs-popover-right bs-popover-right-docs">
+    <div class="arrow" style="top: 0px"></div>
     <h3 class="popover-header">Popover rightbottom</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
@@ -97,24 +97,24 @@ Positioning is relative to the trigger element.
     </div>
   </div>
 
-  <div class="popover bs-popover-bottom bs-popover-bottom-docs">
-    <div class="arrow" style="left: calc(50% - 6px)"></div>
+  <div class="popover b-popover bs-popover-bottom bs-popover-bottom-docs">
+    <div class="arrow" style="left: calc(50% - 8px)"></div>
     <h3 class="popover-header">Popover bottom</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
       quam venenatis vestibulum.
     </div>
   </div>
-  <div class="popover bs-popover-bottom bs-popover-bottom-docs">
-    <div class="arrow" style="right: 6px"></div>
+  <div class="popover b-popover bs-popover-bottom bs-popover-bottom-docs">
+    <div class="arrow" style="right: 0px"></div>
     <h3 class="popover-header">Popover bottomleft</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
       quam venenatis vestibulum.
     </div>
   </div>
-  <div class="popover bs-popover-bottom bs-popover-bottom-docs">
-    <div class="arrow" style="left: 6px"></div>
+  <div class="popover b-popover bs-popover-bottom bs-popover-bottom-docs">
+    <div class="arrow" style="left: 0px"></div>
     <h3 class="popover-header">Popover bottomright</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
@@ -122,24 +122,24 @@ Positioning is relative to the trigger element.
     </div>
   </div>
 
-  <div class="popover bs-popover-left bs-popover-left-docs">
-    <div class="arrow" style="top: calc(50% - 8px)"></div>
+  <div class="popover b-popover bs-popover-left bs-popover-left-docs">
+    <div class="arrow" style="top: calc(50% - 4px)"></div>
     <h3 class="popover-header">Popover left</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
       quam venenatis vestibulum.
     </div>
   </div>
-  <div class="popover bs-popover-left bs-popover-left-docs">
-    <div class="arrow" style="bottom: 4px"></div>
+  <div class="popover b-popover bs-popover-left bs-popover-left-docs">
+    <div class="arrow" style="bottom: 0px"></div>
     <h3 class="popover-header">Popover lefttop</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
       quam venenatis vestibulum.
     </div>
   </div>
-  <div class="popover bs-popover-left bs-popover-left-docs">
-    <div class="arrow" style="top: 4px"></div>
+  <div class="popover b-popover bs-popover-left bs-popover-left-docs">
+    <div class="arrow" style="top: 0px"></div>
     <h3 class="popover-header">Popover leftbottom</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
diff --git a/src/components/tooltip/README.md b/src/components/tooltip/README.md
index 81b65b709ad..d132db5547b 100644
--- a/src/components/tooltip/README.md
+++ b/src/components/tooltip/README.md
@@ -46,52 +46,52 @@ Twelve options are available for positioning: `top`, `topleft`, `topright`, `rig
 The default position is `top`. Positioning is relative to the trigger element.
 
 <div class="bd-example bd-example-tooltip-static">
-  <div class="tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
+  <div class="tooltip b-tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
     <div class="arrow" style="left: calc(50% - 6px)"></div>
     <div class="tooltip-inner">Tooltip on the top</div>
   </div>
-  <div class="tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
-    <div class="arrow" style="right: 6px"></div>
+  <div class="tooltip b-tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
+    <div class="arrow" style="right: 0px"></div>
     <div class="tooltip-inner">Tooltip on the topleft</div>
   </div>
-  <div class="tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
-    <div class="arrow" style="left: 6px"></div>
+  <div class="tooltip b-tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
+    <div class="arrow" style="left: 0px"></div>
     <div class="tooltip-inner">Tooltip on the topright</div>
   </div>
-  <div class="tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
-    <div class="arrow" style="top: calc(50% - 5px)"></div>
+  <div class="tooltip b-tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
+    <div class="arrow" style="top: 5px"></div>
     <div class="tooltip-inner">Tooltip on the right</div>
   </div>
-  <div class="tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
-    <div class="arrow" style="bottom: 4px"></div>
+  <div class="tooltip b-tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
+    <div class="arrow" style="bottom: 0px"></div>
     <div class="tooltip-inner">Tooltip on the righttop</div>
   </div>
-  <div class="tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
-    <div class="arrow" style="top: 4px"></div>
+  <div class="tooltip b-tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
+    <div class="arrow" style="top: 0px"></div>
     <div class="tooltip-inner">Tooltip on the rightbottom</div>
   </div>
-  <div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
+  <div class="tooltip b-tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
     <div class="arrow" style="left: calc(50% - 6px)"></div>
     <div class="tooltip-inner">Tooltip on the bottom</div>
   </div>
-  <div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
-    <div class="arrow" style="right: 6px"></div>
+  <div class="tooltip b-tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
+    <div class="arrow" style="right: 0px"></div>
     <div class="tooltip-inner">Tooltip on the bottomleft</div>
   </div>
-  <div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
-    <div class="arrow" style="left: 6px"></div>
+  <div class="tooltip b-tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
+    <div class="arrow" style="left: 0px"></div>
     <div class="tooltip-inner">Tooltip on the bottomright</div>
   </div>
-  <div class="tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
-    <div class="arrow" style="top: calc(50% - 5px)"></div>
+  <div class="tooltip b-tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
+    <div class="arrow" style="top: 5px"></div>
     <div class="tooltip-inner">Tooltip on the left</div>
   </div>
-  <div class="tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
-    <div class="arrow" style="bottom: 4px"></div>
+  <div class="tooltip b-tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
+    <div class="arrow" style="bottom: 0px"></div>
     <div class="tooltip-inner">Tooltip on the lefttop</div>
   </div>
-  <div class="tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
-    <div class="arrow" style="top: 4px"></div>
+  <div class="tooltip b-tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
+    <div class="arrow" style="top: 0px"></div>
     <div class="tooltip-inner">Tooltip on the leftbottom</div>
   </div>
 </div>
diff --git a/src/components/tooltip/_tooltip.scss b/src/components/tooltip/_tooltip.scss
index 3fd98a8c8b6..b4381c2a731 100644
--- a/src/components/tooltip/_tooltip.scss
+++ b/src/components/tooltip/_tooltip.scss
@@ -18,6 +18,17 @@
   &.noninteractive {
     pointer-events: none;
   }
+
+  .arrow {
+    margin: 0 $tooltip-border-radius;
+  }
+
+  &.bs-tooltip-right,
+  &.bs-tooltip-left {
+    .arrow {
+      margin: $tooltip-border-radius 0;
+    }
+  }
 }
 
 // Create custom variants for tooltips
diff --git a/src/directives/popover/README.md b/src/directives/popover/README.md
index 7f584073c2f..242243068f9 100644
--- a/src/directives/popover/README.md
+++ b/src/directives/popover/README.md
@@ -39,24 +39,24 @@ Twelve options are available for positioning: `top`, `topleft`, `topright`, `rig
 Positioning is relative to the trigger element.
 
 <div class="bd-example bd-example-popover-static">
-  <div class="popover bs-popover-top bs-popover-top-docs">
-    <div class="arrow" style="left: calc(50% - 6px)"></div>
+  <div class="popover b-popover bs-popover-top bs-popover-top-docs">
+    <div class="arrow" style="left: calc(50% - 8px)"></div>
     <h3 class="popover-header">Popover top</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
       quam venenatis vestibulum.
     </div>
   </div>
-  <div class="popover bs-popover-top bs-popover-top-docs">
-    <div class="arrow" style="right: 6px"></div>
+  <div class="popover b-popover bs-popover-top bs-popover-top-docs">
+    <div class="arrow" style="right: 0px"></div>
     <h3 class="popover-header">Popover topleft</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
       quam venenatis vestibulum.
     </div>
   </div>
-  <div class="popover bs-popover-top bs-popover-top-docs">
-    <div class="arrow" style="left: 6px"></div>
+  <div class="popover b-popover bs-popover-top bs-popover-top-docs">
+    <div class="arrow" style="left: 0px"></div>
     <h3 class="popover-header">Popover topright</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
@@ -64,24 +64,24 @@ Positioning is relative to the trigger element.
     </div>
   </div>
 
-  <div class="popover bs-popover-right bs-popover-right-docs">
-    <div class="arrow" style="top: calc(50% - 8px)"></div>
+  <div class="popover b-popover bs-popover-right bs-popover-right-docs">
+    <div class="arrow" style="top: calc(50% - 4px)"></div>
     <h3 class="popover-header">Popover right</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
       quam venenatis vestibulum.
     </div>
   </div>
-  <div class="popover bs-popover-right bs-popover-right-docs">
-    <div class="arrow" style="bottom: 4px"></div>
+  <div class="popover b-popover bs-popover-right bs-popover-right-docs">
+    <div class="arrow" style="bottom: 0px"></div>
     <h3 class="popover-header">Popover righttop</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
       quam venenatis vestibulum.
     </div>
   </div>
-  <div class="popover bs-popover-right bs-popover-right-docs">
-    <div class="arrow" style="top: 4px"></div>
+  <div class="popover b-popover bs-popover-right bs-popover-right-docs">
+    <div class="arrow" style="top: 0px"></div>
     <h3 class="popover-header">Popover rightbottom</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
@@ -89,24 +89,24 @@ Positioning is relative to the trigger element.
     </div>
   </div>
 
-  <div class="popover bs-popover-bottom bs-popover-bottom-docs">
-    <div class="arrow" style="left: calc(50% - 6px)"></div>
+  <div class="popover b-popover bs-popover-bottom bs-popover-bottom-docs">
+    <div class="arrow" style="left: calc(50% - 8px)"></div>
     <h3 class="popover-header">Popover bottom</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
       quam venenatis vestibulum.
     </div>
   </div>
-  <div class="popover bs-popover-bottom bs-popover-bottom-docs">
-    <div class="arrow" style="right: 6px"></div>
+  <div class="popover b-popover bs-popover-bottom bs-popover-bottom-docs">
+    <div class="arrow" style="right: 0px"></div>
     <h3 class="popover-header">Popover bottomleft</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
       quam venenatis vestibulum.
     </div>
   </div>
-  <div class="popover bs-popover-bottom bs-popover-bottom-docs">
-    <div class="arrow" style="left: 6px"></div>
+  <div class="popover b-popover bs-popover-bottom bs-popover-bottom-docs">
+    <div class="arrow" style="left: 0px"></div>
     <h3 class="popover-header">Popover bottomright</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
@@ -114,24 +114,24 @@ Positioning is relative to the trigger element.
     </div>
   </div>
 
-  <div class="popover bs-popover-left bs-popover-left-docs">
-    <div class="arrow" style="top: calc(50% - 8px)"></div>
+  <div class="popover b-popover bs-popover-left bs-popover-left-docs">
+    <div class="arrow" style="top: calc(50% - 4px)"></div>
     <h3 class="popover-header">Popover left</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
       quam venenatis vestibulum.
     </div>
   </div>
-  <div class="popover bs-popover-left bs-popover-left-docs">
-    <div class="arrow" style="bottom: 4px"></div>
+  <div class="popover b-popover bs-popover-left bs-popover-left-docs">
+    <div class="arrow" style="bottom: 0px"></div>
     <h3 class="popover-header">Popover lefttop</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
       quam venenatis vestibulum.
     </div>
   </div>
-  <div class="popover bs-popover-left bs-popover-left-docs">
-    <div class="arrow" style="top: 4px"></div>
+  <div class="popover b-popover bs-popover-left bs-popover-left-docs">
+    <div class="arrow" style="top: 0px"></div>
     <h3 class="popover-header">Popover leftbottom</h3>
     <div class="popover-body">
       Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
diff --git a/src/directives/tooltip/README.md b/src/directives/tooltip/README.md
index 801b6ecf5ce..34b5f5b85a7 100644
--- a/src/directives/tooltip/README.md
+++ b/src/directives/tooltip/README.md
@@ -36,52 +36,52 @@ Twelve options are available for positioning: `top`, `topleft`, `topright`, `rig
 The default position is `top`. Positioning is relative to the trigger element.
 
 <div class="bd-example bd-example-tooltip-static">
-  <div class="tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
+  <div class="tooltip b-tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
     <div class="arrow" style="left: calc(50% - 6px)"></div>
     <div class="tooltip-inner">Tooltip on the top</div>
   </div>
-  <div class="tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
-    <div class="arrow" style="right: 6px"></div>
+  <div class="tooltip b-tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
+    <div class="arrow" style="right: 0px"></div>
     <div class="tooltip-inner">Tooltip on the topleft</div>
   </div>
-  <div class="tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
-    <div class="arrow" style="left: 6px"></div>
+  <div class="tooltip b-tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
+    <div class="arrow" style="left: 0px"></div>
     <div class="tooltip-inner">Tooltip on the topright</div>
   </div>
-  <div class="tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
-    <div class="arrow" style="top: calc(50% - 5px)"></div>
+  <div class="tooltip b-tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
+    <div class="arrow" style="top: 5px"></div>
     <div class="tooltip-inner">Tooltip on the right</div>
   </div>
-  <div class="tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
-    <div class="arrow" style="bottom: 4px"></div>
+  <div class="tooltip b-tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
+    <div class="arrow" style="bottom: 0px"></div>
     <div class="tooltip-inner">Tooltip on the righttop</div>
   </div>
-  <div class="tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
-    <div class="arrow" style="top: 4px"></div>
+  <div class="tooltip b-tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
+    <div class="arrow" style="top: 0px"></div>
     <div class="tooltip-inner">Tooltip on the rightbottom</div>
   </div>
-  <div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
+  <div class="tooltip b-tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
     <div class="arrow" style="left: calc(50% - 6px)"></div>
     <div class="tooltip-inner">Tooltip on the bottom</div>
   </div>
-  <div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
-    <div class="arrow" style="right: 6px"></div>
+  <div class="tooltip b-tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
+    <div class="arrow" style="right: 0px"></div>
     <div class="tooltip-inner">Tooltip on the bottomleft</div>
   </div>
-  <div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
-    <div class="arrow" style="left: 6px"></div>
+  <div class="tooltip b-tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
+    <div class="arrow" style="left: 0px"></div>
     <div class="tooltip-inner">Tooltip on the bottomright</div>
   </div>
-  <div class="tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
-    <div class="arrow" style="top: calc(50% - 5px)"></div>
+  <div class="tooltip b-tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
+    <div class="arrow" style="top: 5px"></div>
     <div class="tooltip-inner">Tooltip on the left</div>
   </div>
-  <div class="tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
-    <div class="arrow" style="bottom: 4px"></div>
+  <div class="tooltip b-tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
+    <div class="arrow" style="bottom: 0px"></div>
     <div class="tooltip-inner">Tooltip on the lefttop</div>
   </div>
-  <div class="tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
-    <div class="arrow" style="top: 4px"></div>
+  <div class="tooltip b-tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
+    <div class="arrow" style="top: 0px"></div>
     <div class="tooltip-inner">Tooltip on the leftbottom</div>
   </div>
 </div>