Merge pull request #12688 from twbs/document_popover_focus

Document popover focus
twbs · Mar 7, 2014 · 864a18f · 864a18f
2 parents 1f14842 + 0b8d27a
commit 864a18f
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 7 deletions.
diff --git a/dist/css/bootstrap-theme.css.map b/dist/css/bootstrap-theme.css.map
diff --git a/dist/css/bootstrap.css.map b/dist/css/bootstrap.css.map
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
@@ -85,7 +85,12 @@
     })
 
     // popover demo
-    $('[data-toggle=popover]').popover()
+    $('.bs-docs-popover').popover()
+
+    // Popover dismiss on next click
+    $('.bs-docs-popover-dismiss').popover({
+      trigger: 'focus'
+    })
 
     // button state demo
     $('#loading-example-btn')

diff --git a/docs/assets/js/docs.min.js b/docs/assets/js/docs.min.js
diff --git a/docs/dist/css/bootstrap-theme.css.map b/docs/dist/css/bootstrap-theme.css.map
diff --git a/docs/dist/css/bootstrap.css.map b/docs/dist/css/bootstrap.css.map
diff --git a/docs/javascript.html b/docs/javascript.html
@@ -1101,6 +1101,8 @@ <h3>Events</h3>
 {% endhighlight %}
 </div>
 
+
+
 <!-- Popovers
 ================================================== -->
 <div class="bs-docs-section">
@@ -1167,8 +1169,11 @@ <h3 class="popover-title">Popover left</h3>
 
   <h3>Live demo</h3>
   <div class="bs-example" style="padding-bottom: 24px;">
-    <a href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?" role="button">Click to toggle popover</a>
+    <button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
   </div>
+{% highlight html %}
+<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
+{% endhighlight %}
 
   <h4>Four directions</h4>
   <div class="bs-example tooltip-demo">
@@ -1204,6 +1209,20 @@ <h4>Four directions</h4>
 <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
   Popover on right
 </button>
+{% endhighlight %}
+
+  <h4>Dismiss on next click</h4>
+  <p>Use the <code>focus</code> trigger to dismiss popovers on their next click.</p>
+  <div class="bs-example" style="padding-bottom: 24px;">
+    <button type="button" class="btn btn-lg btn-danger bs-docs-popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissable popover</button>
+  </div>
+{% highlight html %}
+<button type="button" class="btn btn-lg btn-danger popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissable popover</button>
+{% endhighlight %}
+{% highlight js %}
+$('.popover-dismiss').popover({
+  trigger: 'focus'
+})
 {% endhighlight %}
 
   <div class="bs-callout bs-callout-warning">