diff options
Diffstat (limited to 'docs/_includes')
| -rw-r--r-- | docs/_includes/js/popovers.html | 22 |
1 files changed, 10 insertions, 12 deletions
diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html index ef8e07941..04103c270 100644 --- a/docs/_includes/js/popovers.html +++ b/docs/_includes/js/popovers.html @@ -24,6 +24,10 @@ <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><div></code> and apply the popover to that <code><div></code> instead.</p> </div> + <div class="bs-callout bs-callout-info"> + <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> <h3>Static popover</h3> <p>Four options are available: top, right, bottom, and left aligned.</p> @@ -110,23 +114,17 @@ sagittis lacus vel augue laoreet rutrum faucibus."> <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-callout bs-callout-danger"> + <h4>Specific markup required for dismiss-on-next-click</h4> + <p>For proper cross-browser and cross-platform behavior, you must use the <code><a></code> tag, <i>not</i> the <code><button></code> tag, and you also must include a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex"><code>tabindex</code></a> attribute.</p> + </div> <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> + <a href="#" tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a> </div> {% 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 %} -{% highlight js %} -$('.popover-dismiss').popover({ - trigger: 'focus' -}) +<a href="#" tabindex="0" class="btn btn-lg btn-danger" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a> {% endhighlight %} - <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> - <h2 id="popovers-usage">Usage</h2> <p>Enable popovers via JavaScript:</p> |