diff --git a/docs/components/popovers.md b/docs/components/popovers.md
index f8e4feb2d..dda4edd9b 100644
--- a/docs/components/popovers.md
+++ b/docs/components/popovers.md
@@ -56,29 +56,32 @@ $(function () {
 Four options are available: top, right, bottom, and left aligned.
 
 <div class="bd-example bd-example-popover-static">
-  <div class="popover popover-top">
+  <div class="popover bs-popover-top">
+    <div class="arrow"></div>
     <h3 class="popover-title">Popover top</h3>
     <div class="popover-content">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
     </div>
   </div>
 
-  <div class="popover popover-right">
+  <div class="popover bs-popover-right">
+    <div class="arrow"></div>
     <h3 class="popover-title">Popover right</h3>
     <div class="popover-content">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
     </div>
   </div>
 
-  <div class="popover popover-bottom">
+  <div class="popover bs-popover-bottom">
+    <div class="arrow"></div>
     <h3 class="popover-title">Popover bottom</h3>
-
     <div class="popover-content">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
     </div>
   </div>
 
-  <div class="popover popover-left">
+  <div class="popover bs-popover-left">
+    <div class="arrow"></div>
     <h3 class="popover-title">Popover left</h3>
     <div class="popover-content">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md
index 1299d3a29..ce4430548 100644
--- a/docs/components/tooltips.md
+++ b/docs/components/tooltips.md
@@ -51,22 +51,26 @@ Hover over the links below to see tooltips:
 Four options are available: top, right, bottom, and left aligned.
 
 <div class="bd-example bd-example-tooltip-static">
-  <div class="tooltip tooltip-top" role="tooltip">
+  <div class="tooltip bs-tooltip-top" role="tooltip">
+    <div class="arrow"></div>
     <div class="tooltip-inner">
       Tooltip on the top
     </div>
   </div>
-  <div class="tooltip tooltip-right" role="tooltip">
+  <div class="tooltip bs-tooltip-right" role="tooltip">
+    <div class="arrow"></div>
     <div class="tooltip-inner">
       Tooltip on the right
     </div>
   </div>
-  <div class="tooltip tooltip-bottom" role="tooltip">
+  <div class="tooltip bs-tooltip-bottom" role="tooltip">
+    <div class="arrow"></div>
     <div class="tooltip-inner">
       Tooltip on the bottom
     </div>
   </div>
-  <div class="tooltip tooltip-left" role="tooltip">
+  <div class="tooltip bs-tooltip-left" role="tooltip">
+    <div class="arrow"></div>
     <div class="tooltip-inner">
       Tooltip on the left
     </div>