markdownify js popovers

docs/javascript/popovers.md

@@ -3,11 +3,7 @@ layout: page
 title: Popovers
 ---
 
-<div class="bs-docs-section">
+Add small overlays of content, like those on the iPad, to any element for housing secondary information.
-  <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>
 
 <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>
+### Static popover
-  <p>Four options are available: top, right, bottom, and left aligned.</p>
+
+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>
+### Live demo
-  <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>
+{% example html %}
-  </div>
+<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>
-{% highlight html %}
+{% endexample %}
-<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 %}
+#### 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>
+#### Dismiss on next click
-  <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;">
+Use the `focus` trigger to dismiss popovers on the next click that the user makes.
-    <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>
+{% example html %}
-{% highlight 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>
+## Usage
-  <p>Enable popovers via JavaScript:</p>
+
+Enable popovers via JavaScript:
+
 {% highlight js %}$('#example').popover(options){% endhighlight %}
 
-  <h3>Options</h3>
+### Options
-  <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 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>
+### Methods
-  <h4>$().popover(options)</h4>
+
-  <p>Initializes popovers for an element collection.</p>
+#### $().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>
+#### .popover('hide')
-  <p>Hides an elements popover.</p>
+
+Hides an elements popover.
+
 {% highlight js %}$('#element').popover('hide'){% endhighlight %}
 
-  <h4>.popover('toggle')</h4>
+#### .popover('toggle')
-  <p>Toggles an elements popover.</p>
+
+Toggles an elements popover.
+
 {% highlight js %}$('#element').popover('toggle'){% endhighlight %}
 
-  <h4>.popover('destroy')</h4>
+#### .popover('destroy')
-  <p>Hides and destroys an element's popover.</p>
+
+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>