diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html
index 3182d8c4de..4557a44a42 100644
--- a/docs/_includes/js/popovers.html
+++ b/docs/_includes/js/popovers.html
@@ -39,7 +39,7 @@ $(function () {
   <h3>Static popover</h3>
   <p>Four options are available: top, right, bottom, and left aligned.</p>
   <div class="bs-example bs-example-popover">
-    <div class="popover top">
+    <div class="popover popover-top">
       <div class="popover-arrow"></div>
       <h3 class="popover-title">Popover top</h3>
       <div class="popover-content">
@@ -47,7 +47,7 @@ $(function () {
       </div>
     </div>
 
-    <div class="popover right">
+    <div class="popover popover-right">
       <div class="popover-arrow"></div>
       <h3 class="popover-title">Popover right</h3>
       <div class="popover-content">
@@ -55,7 +55,7 @@ $(function () {
       </div>
     </div>
 
-    <div class="popover bottom">
+    <div class="popover popover-bottom">
       <div class="popover-arrow"></div>
       <h3 class="popover-title">Popover bottom</h3>
 
@@ -64,7 +64,7 @@ $(function () {
       </div>
     </div>
 
-    <div class="popover left">
+    <div class="popover popover-left">
       <div class="popover-arrow"></div>
       <h3 class="popover-title">Popover left</h3>
       <div class="popover-content">
diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html
index ae553e0df0..b8293c9f5d 100644
--- a/docs/_includes/js/tooltips.html
+++ b/docs/_includes/js/tooltips.html
@@ -12,25 +12,25 @@
   <h3>Static tooltip</h3>
   <p>Four options are available: top, right, bottom, and left aligned.</p>
   <div class="bs-example bs-example-tooltip">
-    <div class="tooltip left" role="tooltip">
+    <div class="tooltip tooltip-left" role="tooltip">
       <div class="tooltip-arrow"></div>
       <div class="tooltip-inner">
         Tooltip on the left
       </div>
     </div>
-    <div class="tooltip top" role="tooltip">
+    <div class="tooltip tooltip-top" role="tooltip">
       <div class="tooltip-arrow"></div>
       <div class="tooltip-inner">
         Tooltip on the top
       </div>
     </div>
-    <div class="tooltip bottom" role="tooltip">
+    <div class="tooltip tooltip-bottom" role="tooltip">
       <div class="tooltip-arrow"></div>
       <div class="tooltip-inner">
         Tooltip on the bottom
       </div>
     </div>
-    <div class="tooltip right" role="tooltip">
+    <div class="tooltip tooltip-right" role="tooltip">
       <div class="tooltip-arrow"></div>
       <div class="tooltip-inner">
         Tooltip on the right
diff --git a/docs/javascript/popovers.md b/docs/javascript/popovers.md
index f84d52bbeb..28cafb1b08 100644
--- a/docs/javascript/popovers.md
+++ b/docs/javascript/popovers.md
@@ -43,7 +43,7 @@ $(function () {
 Four options are available: top, right, bottom, and left aligned.
 
 <div class="bs-example bs-example-popover">
-  <div class="popover top">
+  <div class="popover popover-top">
     <div class="popover-arrow"></div>
     <h3 class="popover-title">Popover top</h3>
     <div class="popover-content">
@@ -51,7 +51,7 @@ Four options are available: top, right, bottom, and left aligned.
     </div>
   </div>
 
-  <div class="popover right">
+  <div class="popover popover-right">
     <div class="popover-arrow"></div>
     <h3 class="popover-title">Popover right</h3>
     <div class="popover-content">
@@ -59,7 +59,7 @@ Four options are available: top, right, bottom, and left aligned.
     </div>
   </div>
 
-  <div class="popover bottom">
+  <div class="popover popover-bottom">
     <div class="popover-arrow"></div>
     <h3 class="popover-title">Popover bottom</h3>
 
@@ -68,7 +68,7 @@ Four options are available: top, right, bottom, and left aligned.
     </div>
   </div>
 
-  <div class="popover left">
+  <div class="popover popover-left">
     <div class="popover-arrow"></div>
     <h3 class="popover-title">Popover left</h3>
     <div class="popover-content">