rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

popover dismiss-on-next-click example: instead of <button>, use <a> w/ tabindex

Browse Source 
Fixes #14038.

Research supporting this choice of approach:
    https://gist.github.com/cvrebert/68659d0333a578d75372

Why not <button>?
Even with a `tabindex` attribute, they don't gain focus when clicked upon in:
    * Mac OS X Firefox 30.0
    * Mac OS X Safari 7.0.5
This commit is contained in:
Chris Rebert 2014-07-15 16:57:25 -07:00
parent dd22f59999
commit 11db482371
2 changed files with 11 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/_includes/js/popovers.html
View File

@ -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>&lt;div&gt;</code> and apply the popover to that <code>&lt;div&gt;</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,22 +114,16 @@ 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>&lt;a&gt;</code> tag, <i>not</i> the <code>&lt;button&gt;</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>
<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 %}
{% highlight js %}
$('.popover-dismiss').popover({
trigger: 'focus'
})
{% 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>

3
docs/assets/js/src/application.js
View File

@ -97,9 +97,8 @@
$('.tooltip-test').tooltip()
$('.popover-test').popover()
// Default & dismissible popover demos
// Popover demos
$('.bs-docs-popover').popover()
$('.bs-docs-popover-dismiss').popover({ trigger: 'focus' })
// Button state demo
$('#loading-example-btn').click(function () {