diff options
| author | Mark Otto <[email protected]> | 2014-02-10 21:34:05 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-02-10 21:34:05 -0800 |
| commit | 784a95d94598301a35a89a591a426438cace96a7 (patch) | |
| tree | 907f53d59360009ea27b2afcf5ad2e07c751c7d1 /docs/javascript.html | |
| parent | 728067b586d2d989c07e8a6265f06fa8631c6b1f (diff) | |
| download | bootstrap-784a95d94598301a35a89a591a426438cace96a7.tar.xz bootstrap-784a95d94598301a35a89a591a426438cace96a7.zip | |
Documents #10140
Diffstat (limited to 'docs/javascript.html')
| -rw-r--r-- | docs/javascript.html | 21 |
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> |