Fixes #11833: add warning to docs for popover multiple line positioning; update it's docs with example markup, too

1 files changed, 26 insertions, 0 deletions

diff --git a/javascript.html b/javascript.html
index ee83242454..76c9807ebf 100644
--- a/javascript.html
+++ b/javascript.html
@@ -906,8 +906,11 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
     </div><!-- /example -->
 {% highlight html %}
 <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
+
 <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
+
 <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
+
 <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
 {% endhighlight %}
 
@@ -1170,6 +1173,29 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
         </button>
       </div>
     </div><!-- /example -->
+{% highlight html %}
+<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+  Popover on left
+</button>
+
+<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+  Popover on top
+</button>
+
+<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
+sagittis lacus vel augue laoreet rutrum faucibus.">
+  Popover on bottom
+</button>
+
+<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+  Popover on right
+</button>
+{% endhighlight %}
+
+    <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>
 
 
     <h2 id="popovers-usage">Usage</h2>