0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-17 14:54:30 +01:00

markdownify js popovers

This commit is contained in:
Mark Otto 2014-07-13 00:54:34 -07:00
parent 9499907b46
commit ab20dd1bcd

@ -3,11 +3,7 @@ layout: page
title: Popovers
---
<div class="bs-docs-section">
<h1 id="popovers" class="page-header">Popovers <small>popover.js</small></h1>
<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>
Add small overlays of content, like those on the iPad, to any element for housing secondary information.
<div class="bs-callout bs-callout-danger">
<h4>Plugin dependency</h4>
@ -30,8 +26,10 @@ title: Popovers
<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>
<h3>Static popover</h3>
<p>Four options are available: top, right, bottom, and left aligned.</p>
### 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>
@ -69,15 +67,14 @@ title: Popovers
<div class="clearfix"></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
{% 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
<h4>Four directions</h4>
<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.">
@ -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,14 +111,14 @@ 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'
@ -133,12 +131,16 @@ $('.popover-dismiss').popover({
</div>
<h2 id="popovers-usage">Usage</h2>
<p>Enable popovers via JavaScript:</p>
## Usage
Enable popovers via JavaScript:
{% highlight js %}$('#example').popover(options){% endhighlight %}
<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>
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
@ -235,32 +237,45 @@ $('.popover-dismiss').popover({
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
</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>
<h3>Methods</h3>
<h4>$().popover(options)</h4>
<p>Initializes popovers for an element collection.</p>
### Methods
#### $().popover(options)
Initializes popovers for an element collection.
#### .popover('show')
Reveals an elements popover.
<h4>.popover('show')</h4>
<p>Reveals an elements popover.</p>
{% highlight js %}$('#element').popover('show'){% endhighlight %}
<h4>.popover('hide')</h4>
<p>Hides an elements popover.</p>
#### .popover('hide')
Hides an elements popover.
{% highlight js %}$('#element').popover('hide'){% endhighlight %}
<h4>.popover('toggle')</h4>
<p>Toggles an elements popover.</p>
#### .popover('toggle')
Toggles an elements popover.
{% highlight js %}$('#element').popover('toggle'){% endhighlight %}
<h4>.popover('destroy')</h4>
<p>Hides and destroys an element's popover.</p>
#### .popover('destroy')
Hides and destroys an element's popover.
{% highlight js %}$('#element').popover('destroy'){% endhighlight %}
<h3>Events</h3>
### Events
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
@ -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>