diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 02cc730bd3..a071a855b4 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -106,7 +106,14 @@ $(function () {
   $('.tooltip-demo.well').tooltip({
     selector: "a[rel=tooltip]"
   })
-  $('.tooltip-test').tooltip()
+
+  $('.tooltip-test').tooltip({
+    'z-index': 3000
+  })
+
+  $('.popover-test').popover({
+    'z-index': 3000
+  })
 
   // popover demo
   $("a[rel=popover]")
diff --git a/docs/javascript.html b/docs/javascript.html
index 24de47157f..6bec3d122a 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -221,7 +221,7 @@
               <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
 
               <h4>Popover in a modal</h4>
-              <p>This <a href="#" class="btn" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
+              <p>This <a href="#" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
 
               <h4>Tooltips in a modal</h4>
               <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
@@ -740,6 +740,12 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
                 <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
                </td>
              </tr>
+             <tr>
+               <td>z-index</td>
+               <td>number</td>
+               <td>1020</td>
+               <td>The tooltips z-index value</td>
+             </tr>
             </tbody>
           </table>
           <p><span class="label notice">Notice</span> Individual tooltip instance options can alternatively be specified through the use of data attributes.</p>
@@ -840,6 +846,12 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
                 <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
                </td>
              </tr>
+             <tr>
+               <td>z-index</td>
+               <td>number</td>
+               <td>1010</td>
+               <td>The popovers z-index value</td>
+             </tr>
             </tbody>
           </table>
           <p><span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</p>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 6e3ba25da4..ec711a3125 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -156,7 +156,7 @@
               <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
 
               <h4>{{_i}}Popover in a modal{{/i}}</h4>
-              <p>{{_i}}This <a href="#" class="btn" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.{{/i}}</p>
+              <p>{{_i}}This <a href="#" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.{{/i}}</p>
 
               <h4>{{_i}}Tooltips in a modal{{/i}}</h4>
               <p>{{_i}}<a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.{{/i}}</p>
@@ -675,6 +675,12 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
                 <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
                </td>
              </tr>
+             <tr>
+               <td>{{_i}}z-index{{/i}}</td>
+               <td>{{_i}}number{{/i}}</td>
+               <td>1020</td>
+               <td>The tooltips z-index value</td>
+             </tr>
             </tbody>
           </table>
           <p>{{_i}}<span class="label notice">Notice</span> Individual tooltip instance options can alternatively be specified through the use of data attributes.{{/i}}</p>
@@ -775,6 +781,12 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
                 <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
                </td>
              </tr>
+             <tr>
+               <td>{{_i}}z-index{{/i}}</td>
+               <td>{{_i}}number{{/i}}</td>
+               <td>1010</td>
+               <td>The popovers z-index value</td>
+             </tr>
             </tbody>
           </table>
           <p>{{_i}}<span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.{{/i}}</p>
diff --git a/js/bootstrap-tooltip.js b/js/bootstrap-tooltip.js
index 21f2311fb2..65f8895aa5 100644
--- a/js/bootstrap-tooltip.js
+++ b/js/bootstrap-tooltip.js
@@ -145,6 +145,9 @@
             break
         }
 
+        debugger
+        if (this.options['z-index']) tp['z-index'] = this.options['z-index']
+
         $tip
           .css(tp)
           .addClass(placement)
@@ -265,6 +268,7 @@
   , trigger: 'hover'
   , title: ''
   , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
+  , 'z-index': false
   }
 
 }( window.jQuery )