Skip to content

B
bootstrap
Commit ab20dd1b authored by Mark Otto's avatar Mark Otto
Browse files
Options

markdownify js popovers

parent 9499907b
Show whitespace changes
Inline Side-by-side
Showing with 258 additions and 243 deletions
docs/javascript/popovers.md
View file @ ab20dd1b
......@@ -3,36 +3,34 @@ layout: page
title: Popovers
---
<div class="bs-docs-section">
<h1 id="popovers" class="page-header">Popovers <small>popover.js</small></h1>
Add small overlays of content, like those on the iPad, to any element for housing secondary information.
<h2 id="popovers-examples">Examples</h2>
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger">
<h4>Plugin dependency</h4>
<p>Popovers require the <a href="#tooltips">tooltip plugin</a> to be included in your version of Bootstrap.</p>
</div>
<div class="bs-callout bs-callout-danger">
</div>
<div class="bs-callout bs-callout-danger">
<h4>Opt-in functionality</h4>
<p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
</div>
<div class="bs-callout bs-callout-warning">
</div>
<div class="bs-callout bs-callout-warning">
<h4>Popovers in button groups and input groups require special setting</h4>
<p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).</p>
</div>
<div class="bs-callout bs-callout-warning">
</div>
<div class="bs-callout bs-callout-warning">
<h4>Don't try to show popovers on hidden elements</h4>
<p>Invoking <code>$(...).popover('show')</code> when the target element is <code>display: none;</code> will cause the popover to be incorrectly positioned.</p>
</div>
<div class="bs-callout bs-callout-info">
</div>
<div class="bs-callout bs-callout-info">
<h4>Popovers on disabled elements require wrapper elements</h4>
<p>To add a popover to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code>&lt;div&gt;</code> and apply the popover to that <code>&lt;div&gt;</code> instead.</p>
</div>
</div>
<h3>Static popover</h3>
<p>Four options are available: top, right, bottom, and left aligned.</p>
<div class="bs-example bs-example-popover">
### Static popover
Four options are available: top, right, bottom, and left aligned.
<div class="bs-example bs-example-popover">
<div class="popover top">
<div class="arrow"></div>
<h3 class="popover-title">Popover top</h3>
......@@ -67,18 +65,17 @@ title: Popovers
</div>
<div class="clearfix"></div>
</div>
</div>
<h3>Live demo</h3>
<div class="bs-example" style="padding-bottom: 24px;">
<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 %}
### Live demo
<h4>Four directions</h4>
<div class="bs-example popover-demo">
{% example html %}
<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>
{% endexample %}
#### Four directions
<div class="bs-example popover-demo">
<div class="bs-example-popovers">
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
......@@ -93,7 +90,8 @@ title: Popovers
Popover on right
</button>
</div>
</div><!-- /example -->
</div>
{% highlight html %}
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
......@@ -113,33 +111,37 @@ 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 the next click that the user makes.</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="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button>
</div>
{% highlight html %}
#### Dismiss on next click
Use the `focus` trigger to dismiss popovers on the next click that the user makes.
{% example html %}
<button type="button" class="btn btn-lg btn-danger popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button>
{% endhighlight %}
{% endexample %}
{% highlight js %}
$('.popover-dismiss').popover({
trigger: 'focus'
})
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<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>
</div>
</div>
## Usage
Enable popovers via JavaScript:
{% highlight js %}$('#example').popover(options){% endhighlight %}
### Options
<h2 id="popovers-usage">Usage</h2>
<p>Enable popovers via JavaScript:</p>
{% highlight js %}$('#example').popover(options){% endhighlight %}
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
<div class="table-responsive">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
......@@ -235,33 +237,46 @@ $('.popover-dismiss').popover({
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
<div class="bs-callout bs-callout-info">
</div>
<div class="bs-callout bs-callout-info">
<h4>Data attributes for individual popovers</h4>
<p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
</div>
</div>
### Methods
#### $().popover(options)
<h3>Methods</h3>
<h4>$().popover(options)</h4>
<p>Initializes popovers for an element collection.</p>
Initializes popovers for an element collection.
<h4>.popover('show')</h4>
<p>Reveals an elements popover.</p>
{% highlight js %}$('#element').popover('show'){% endhighlight %}
#### .popover('show')
<h4>.popover('hide')</h4>
<p>Hides an elements popover.</p>
{% highlight js %}$('#element').popover('hide'){% endhighlight %}
Reveals an elements popover.
<h4>.popover('toggle')</h4>
<p>Toggles an elements popover.</p>
{% highlight js %}$('#element').popover('toggle'){% endhighlight %}
{% highlight js %}$('#element').popover('show'){% endhighlight %}
<h4>.popover('destroy')</h4>
<p>Hides and destroys an element's popover.</p>
{% highlight js %}$('#element').popover('destroy'){% endhighlight %}
<h3>Events</h3>
<div class="table-responsive">
#### .popover('hide')
Hides an elements popover.
{% highlight js %}$('#element').popover('hide'){% endhighlight %}
#### .popover('toggle')
Toggles an elements popover.
{% highlight js %}$('#element').popover('toggle'){% endhighlight %}
#### .popover('destroy')
Hides and destroys an element's popover.
{% highlight js %}$('#element').popover('destroy'){% endhighlight %}
### Events
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
......@@ -288,10 +303,10 @@ $('.popover-dismiss').popover({
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
</div>
{% highlight js %}
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})
{% endhighlight %}
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment