mardownify js tooltips

docs/javascript/tooltips.md

@@ -3,18 +3,21 @@ layout: page
 title: Tooltips
 ---
 
-<div class="bs-docs-section">
+## Examples
-  <h1 id="tooltips" class="page-header">Tooltips <small>tooltip.js</small></h1>
+
+Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.
+
+Hover over the links below to see tooltips:
 
-  <h2 id="tooltips-examples">Examples</h2>
-  <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
-  <p>Hover over the links below to see tooltips:</p>
 <div class="bs-example tooltip-demo">
-    <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
+  <p class="muted">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
   </p>
-  </div><!-- /example -->
+</div>
+
+### Directions
+
+Available in four directions
 
-  <h3>Four directions</h3>
 <div class="bs-example tooltip-demo">
   <div class="bs-example-tooltips">
     <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
@@ -22,15 +25,21 @@ title: Tooltips
     <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
     <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
   </div>
-  </div><!-- /example -->
+</div>
+
 {% highlight html %}
-<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
-
+  Tooltip on left
-<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
+</button>
-
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
-<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
+  Tooltip on top
-
+</button>
-<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
+  Tooltip on bottom
+</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
+  Tooltip on right
+</button>
 {% endhighlight %}
 
 <div class="bs-callout bs-callout-danger">
@@ -50,19 +59,25 @@ title: Tooltips
   <p>To add a tooltip to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code>&lt;div&gt;</code> and apply the tooltip to that <code>&lt;div&gt;</code> instead.</p>
 </div>
 
-  <h2 id="tooltips-usage">Usage</h2>
+## Usage
-  <p>The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.</p>
+
-  <p>Trigger the tooltip via JavaScript:</p>
+The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
+
+Trigger the tooltip via JavaScript:
+
 {% highlight js %}
 $('#example').tooltip(options)
 {% endhighlight %}
 
-  <h3>Markup</h3>
+### Markup
-  <p>The required markup for a tooltip is only a <code>data</code> attribute and <code>title</code> on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to <code>top</code> by the plugin).</p>
+
+The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
+
 <div class="bs-callout bs-callout-warning">
   <h4>Multiple-line links</h4>
   <p>Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
 </div>
+
 {% highlight html %}
 <!-- HTML to write -->
 <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
@@ -76,8 +91,10 @@ $('#example').tooltip(options)
 </div>
 {% 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>
@@ -164,34 +181,45 @@ $('#example').tooltip(options)
      </tr>
     </tbody>
   </table>
-  </div><!-- /.table-responsive -->
+</div>
+
 <div class="bs-callout bs-callout-info">
   <h4>Data attributes for individual tooltips</h4>
   <p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
 </div>
 
-  <h3>Methods</h3>
+### Methods
 
-  <h4>$().tooltip(options)</h4>
+#### $().tooltip(options)
-  <p>Attaches a tooltip handler to an element collection.</p>
+
+Attaches a tooltip handler to an element collection.
+
+#### .tooltip('show')
+
+Reveals an element's tooltip.
 
-  <h4>.tooltip('show')</h4>
-  <p>Reveals an element's tooltip.</p>
 {% highlight js %}$('#element').tooltip('show'){% endhighlight %}
 
-  <h4>.tooltip('hide')</h4>
+#### .tooltip('hide')
-  <p>Hides an element's tooltip.</p>
+
+Hides an element's tooltip.
+
 {% highlight js %}$('#element').tooltip('hide'){% endhighlight %}
 
-  <h4>.tooltip('toggle')</h4>
+#### .tooltip('toggle')
-  <p>Toggles an element's tooltip.</p>
+
+Toggles an element's tooltip.
+
 {% highlight js %}$('#element').tooltip('toggle'){% endhighlight %}
 
-  <h4>.tooltip('destroy')</h4>
+#### .tooltip('destroy')
-  <p>Hides and destroys an element's tooltip.</p>
+
+Hides and destroys an element's tooltip.
+
 {% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
 
-  <h3>Events</h3>
+### Events
+
 <div class="table-responsive">
   <table class="table table-bordered table-striped">
     <thead>
@@ -219,10 +247,10 @@ $('#example').tooltip(options)
      </tr>
     </tbody>
   </table>
-  </div><!-- /.table-responsive -->
+</div>
+
 {% highlight js %}
 $('#myTooltip').on('hidden.bs.tooltip', function () {
   // do something…
 })
 {% endhighlight %}
-</div>