diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md
index fb8cb24ddf..a102aa9257 100644
--- a/docs/components/tooltips.md
+++ b/docs/components/tooltips.md
@@ -49,25 +49,25 @@ 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 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 right" role="tooltip">
+  <div class="tooltip tooltip-right" role="tooltip">
     <div class="tooltip-arrow"></div>
     <div class="tooltip-inner">
       Tooltip on the right
     </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 left" role="tooltip">
+  <div class="tooltip tooltip-left" role="tooltip">
     <div class="tooltip-arrow"></div>
     <div class="tooltip-inner">
       Tooltip on the left
@@ -128,7 +128,7 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
 <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
 
 <!-- Generated markup by the plugin -->
-<div class="tooltip top" role="tooltip">
+<div class="tooltip tooltip-top" role="tooltip">
   <div class="tooltip-arrow"></div>
   <div class="tooltip-inner">
     Some tooltip text!