mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
fixes #5173: proper popover offsets; added docs examples to enable tests in the future
This commit is contained in:
parent
783f4885ab
commit
cedb3c7c56
4 changed files with 24 additions and 4 deletions
4
docs/assets/css/bootstrap.css
vendored
4
docs/assets/css/bootstrap.css
vendored
|
@ -5109,7 +5109,7 @@ input[type="submit"].btn.btn-mini {
|
|||
}
|
||||
|
||||
.popover.top {
|
||||
margin-bottom: 10px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.popover.right {
|
||||
|
@ -5121,7 +5121,7 @@ input[type="submit"].btn.btn-mini {
|
|||
}
|
||||
|
||||
.popover.left {
|
||||
margin-right: 10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.popover-title {
|
||||
|
|
|
@ -925,6 +925,16 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||
<a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
|
||||
</div>
|
||||
|
||||
<h4>Four directions</h4>
|
||||
<div class="bs-docs-example tooltip-demo">
|
||||
<ul class="bs-docs-tooltip-examples">
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
|
10
docs/templates/pages/javascript.mustache
vendored
10
docs/templates/pages/javascript.mustache
vendored
|
@ -855,6 +855,16 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
|||
<a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}Click to toggle popover{{/i}}</a>
|
||||
</div>
|
||||
|
||||
<h4>{{_i}}Four directions{{/i}}</h4>
|
||||
<div class="bs-docs-example tooltip-demo">
|
||||
<ul class="bs-docs-tooltip-examples">
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
|
||||
<li><a href="#" class="btn" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
|
||||
</ul>
|
||||
</div>{{! /example }}
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
|
|
@ -21,10 +21,10 @@
|
|||
.box-shadow(0 5px 10px rgba(0,0,0,.2));
|
||||
|
||||
// Offset the popover to account for the popover arrow
|
||||
&.top { margin-bottom: 10px; }
|
||||
&.top { margin-top: -10px; }
|
||||
&.right { margin-left: 10px; }
|
||||
&.bottom { margin-top: 10px; }
|
||||
&.left { margin-right: 10px; }
|
||||
&.left { margin-left: -10px; }
|
||||
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue