aboutsummaryrefslogtreecommitdiff
path: root/docs/javascript.html
diff options
context:
space:
mode:
Diffstat (limited to 'docs/javascript.html')
-rw-r--r--docs/javascript.html21
1 files changed, 20 insertions, 1 deletions
diff --git a/docs/javascript.html b/docs/javascript.html
index 16cd66e65..1d2a980ae 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -1094,6 +1094,8 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
{% endhighlight %}
</div>
+
+
<!-- Popovers
================================================== -->
<div class="bs-docs-section">
@@ -1160,8 +1162,11 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
<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</a>
</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</a>
+{% endhighlight %}
<h4>Four directions</h4>
<div class="bs-example tooltip-demo">
@@ -1199,6 +1204,20 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
</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</a>
+ </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</a>
+{% endhighlight %}
+{% highlight js %}
+$('.popover-dismiss').popover({
+ trigger: 'focus'
+})
+{% endhighlight %}
+
<div class="bs-callout bs-callout-warning">
<h4>Multiple-line links</h4>
<p>Sometimes you want to add a popover to a hyperlink that wraps multiple lines. The default behavior of the popover plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>