chore(docs): minor updates to tooltip/popover docs (#4403)

bootstrap-vue · Nov 20, 2019 · 0518691 · 0518691
1 parent eec3b43
commit 0518691
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git a/src/components/popover/README.md b/src/components/popover/README.md
@@ -48,7 +48,7 @@ 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: 6px"></div>
+    <div class="arrow" style="left: calc(50% - 6px)"></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
@@ -73,7 +73,7 @@ Positioning is relative to the trigger element.
   </div>
 
   <div class="popover bs-popover-right bs-popover-right-docs">
-    <div class="arrow" style="top: 4px"></div>
+    <div class="arrow" style="top: calc(50% - 8px)"></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
@@ -98,7 +98,7 @@ Positioning is relative to the trigger element.
   </div>
 
   <div class="popover bs-popover-bottom bs-popover-bottom-docs">
-    <div class="arrow" style="left: 6px"></div>
+    <div class="arrow" style="left: calc(50% - 6px)"></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
@@ -123,7 +123,7 @@ Positioning is relative to the trigger element.
   </div>
 
   <div class="popover bs-popover-left bs-popover-left-docs">
-    <div class="arrow" style="top: 4px"></div>
+    <div class="arrow" style="top: calc(50% - 8px)"></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

diff --git a/src/components/tooltip/README.md b/src/components/tooltip/README.md
@@ -47,7 +47,7 @@ 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="arrow" style="left: 6px"></div>
+    <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">
@@ -59,7 +59,7 @@ The default position is `top`. Positioning is relative to the trigger element.
     <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: 4px"></div>
+    <div class="arrow" style="top: calc(50% - 5px)"></div>
     <div class="tooltip-inner">Tooltip on the right</div>
   </div>
   <div class="tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
@@ -71,7 +71,7 @@ The default position is `top`. Positioning is relative to the trigger element.
     <div class="tooltip-inner">Tooltip on the rightbottom</div>
   </div>
   <div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
-    <div class="arrow" style="left: 6px"></div>
+    <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">
@@ -83,7 +83,7 @@ The default position is `top`. Positioning is relative to the trigger element.
     <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: 4px"></div>
+    <div class="arrow" style="top: calc(50% - 5px)"></div>
     <div class="tooltip-inner">Tooltip on the left</div>
   </div>
   <div class="tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">

diff --git a/src/directives/popover/README.md b/src/directives/popover/README.md
@@ -40,7 +40,7 @@ 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: 6px"></div>
+    <div class="arrow" style="left: calc(50% - 6px)"></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
@@ -65,7 +65,7 @@ Positioning is relative to the trigger element.
   </div>
 
   <div class="popover bs-popover-right bs-popover-right-docs">
-    <div class="arrow" style="top: 4px"></div>
+    <div class="arrow" style="top: calc(50% - 8px)"></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
@@ -90,7 +90,7 @@ Positioning is relative to the trigger element.
   </div>
 
   <div class="popover bs-popover-bottom bs-popover-bottom-docs">
-    <div class="arrow" style="left: 6px"></div>
+    <div class="arrow" style="left: calc(50% - 6px)"></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
@@ -115,7 +115,7 @@ Positioning is relative to the trigger element.
   </div>
 
   <div class="popover bs-popover-left bs-popover-left-docs">
-    <div class="arrow" style="top: 4px"></div>
+    <div class="arrow" style="top: calc(50% - 8px)"></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

diff --git a/src/directives/tooltip/README.md b/src/directives/tooltip/README.md
@@ -37,7 +37,7 @@ 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="arrow" style="left: 6px"></div>
+    <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">
@@ -49,7 +49,7 @@ The default position is `top`. Positioning is relative to the trigger element.
     <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: 4px"></div>
+    <div class="arrow" style="top: calc(50% - 5px)"></div>
     <div class="tooltip-inner">Tooltip on the right</div>
   </div>
   <div class="tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
@@ -61,7 +61,7 @@ The default position is `top`. Positioning is relative to the trigger element.
     <div class="tooltip-inner">Tooltip on the rightbottom</div>
   </div>
   <div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
-    <div class="arrow" style="left: 6px"></div>
+    <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">
@@ -73,7 +73,7 @@ The default position is `top`. Positioning is relative to the trigger element.
     <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: 4px"></div>
+    <div class="arrow" style="top: calc(50% - 5px)"></div>
     <div class="tooltip-inner">Tooltip on the left</div>
   </div>
   <div class="tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">