Skip to content
GitLab
Commit 54b03c27 authored by Chris Rebert's avatar Chris Rebert
Browse files

Merge pull request #43 from twbs/popover-arrow 

rename .arrow => .popover-arrow
parents e26701c0 730c3f5f
Hide whitespace changes
Inline Side-by-side
Showing
with 202 additions and 213 deletions
+202 -213
dist/css/bootstrap.css
+ 57
- 61
View file @ 54b03c27
...@@ -447,7 +447,7 @@ ul ul, ul ol, ol ul, ol ol { ...@@ -447,7 +447,7 @@ ul ul, ul ol, ol ul, ol ol {
margin-bottom: 0; margin-bottom: 0;
} }
.list-unstyled, .nav { .list-unstyled, .list-inline, .nav {
padding-left: 0; padding-left: 0;
list-style: none; list-style: none;
} }
...@@ -607,7 +607,7 @@ pre code { ...@@ -607,7 +607,7 @@ pre code {
} }
@media (min-width: 34em) { @media (min-width: 34em) {
.container { .container {
max-width: 34em; max-width: 34rem;
} }
} }
@media (min-width: 48em) { @media (min-width: 48em) {
...@@ -620,6 +620,11 @@ pre code { ...@@ -620,6 +620,11 @@ pre code {
max-width: 60rem; max-width: 60rem;
} }
} }
@media (min-width: 75em) {
.container {
max-width: 72.25rem;
}
}
.container-fluid { .container-fluid {
padding-right: .75rem; padding-right: .75rem;
...@@ -647,7 +652,7 @@ pre code { ...@@ -647,7 +652,7 @@ pre code {
clear: both; clear: both;
} }
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xl-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xl-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xl-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xl-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xl-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xl-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xl-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xl-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xl-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12 { .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
position: relative; position: relative;
min-height: 1px; min-height: 1px;
padding-right: .75rem; padding-right: .75rem;
...@@ -1492,7 +1497,7 @@ pre code { ...@@ -1492,7 +1497,7 @@ pre code {
} }
} }
@media (min-width: 62em) { @media (min-width: 75em) {
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 { .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
float: left; float: left;
} }
...@@ -2726,7 +2731,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto ...@@ -2726,7 +2731,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
z-index: 990; z-index: 990;
} }
.pull-right > .dropdown-menu, .navbar-right > .dropdown-menu { .pull-right > .dropdown-menu {
right: 0; right: 0;
left: auto; left: auto;
} }
...@@ -3247,7 +3252,12 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto ...@@ -3247,7 +3252,12 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
} }
@media (min-width: 34em) { @media (min-width: 34em) {
.navbar-left {
float: left !important;
}
.navbar-right { .navbar-right {
float: right !important;
margin-right: -1rem; margin-right: -1rem;
} }
.navbar-right ~ .navbar-right { .navbar-right ~ .navbar-right {
...@@ -3752,7 +3762,7 @@ a.label:hover, a.label:focus { ...@@ -3752,7 +3762,7 @@ a.label:hover, a.label:focus {
.badge:empty { .badge:empty {
display: none; display: none;
} }
.badge.pull-left, .badge.navbar-left, .badge.pull-right, .badge.navbar-right { .badge.pull-left, .badge.pull-right {
top: .2em; top: .2em;
} }
.list-group-item.active > .badge, .nav-pills > .active > a > .badge { .list-group-item.active > .badge, .nav-pills > .active > a > .badge {
...@@ -4084,11 +4094,11 @@ a.badge:hover, a.badge:focus { ...@@ -4084,11 +4094,11 @@ a.badge:hover, a.badge:focus {
display: block; display: block;
} }
.media-right, .media > .pull-right, .media > .navbar-right { .media-right, .media > .pull-right {
padding-left: 10px; padding-left: 10px;
} }
.media-left, .media > .pull-left, .media > .navbar-left { .media-left, .media > .pull-left {
padding-right: 10px; padding-right: 10px;
} }
...@@ -4467,19 +4477,23 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro ...@@ -4467,19 +4477,23 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
.tooltip.in { .tooltip.in {
opacity: .9; opacity: .9;
} }
.tooltip.top {
.tooltip-top {
padding: 5px 0; padding: 5px 0;
margin-top: -3px; margin-top: -3px;
} }
.tooltip.right {
.tooltip-right {
padding: 0 5px; padding: 0 5px;
margin-left: 3px; margin-left: 3px;
} }
.tooltip.bottom {
.tooltip-bottom {
padding: 5px 0; padding: 5px 0;
margin-top: 3px; margin-top: 3px;
} }
.tooltip.left {
.tooltip-left {
padding: 0 5px; padding: 0 5px;
margin-left: -3px; margin-left: -3px;
} }
...@@ -4502,62 +4516,37 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro ...@@ -4502,62 +4516,37 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
border-style: solid; border-style: solid;
} }
.tooltip.top .tooltip-arrow { .tooltip-top .tooltip-arrow {
bottom: 0; bottom: 0;
left: 50%; left: 50%;
margin-left: -5px; margin-left: -5px;
border-width: 5px 5px 0; border-width: 5px 5px 0;
border-top-color: #000; border-top-color: #000;
} }
.tooltip.top-left .tooltip-arrow {
right: 5px; .tooltip-right .tooltip-arrow {
bottom: 0;
margin-bottom: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
bottom: 0;
left: 5px;
margin-bottom: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
top: 50%; top: 50%;
left: 0; left: 0;
margin-top: -5px; margin-top: -5px;
border-width: 5px 5px 5px 0; border-width: 5px 5px 5px 0;
border-right-color: #000; border-right-color: #000;
} }
.tooltip.left .tooltip-arrow {
.tooltip-left .tooltip-arrow {
top: 50%; top: 50%;
right: 0; right: 0;
margin-top: -5px; margin-top: -5px;
border-width: 5px 0 5px 5px; border-width: 5px 0 5px 5px;
border-left-color: #000; border-left-color: #000;
} }
.tooltip.bottom .tooltip-arrow {
.tooltip-bottom .tooltip-arrow {
top: 0; top: 0;
left: 50%; left: 50%;
margin-left: -5px; margin-left: -5px;
border-width: 0 5px 5px; border-width: 0 5px 5px;
border-bottom-color: #000; border-bottom-color: #000;
} }
.tooltip.bottom-left .tooltip-arrow {
top: 0;
right: 5px;
margin-top: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
top: 0;
left: 5px;
margin-top: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.popover { .popover {
position: absolute; position: absolute;
...@@ -4581,16 +4570,20 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro ...@@ -4581,16 +4570,20 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2); box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
} }
.popover.top {
.popover-top {
margin-top: -10px; margin-top: -10px;
} }
.popover.right {
.popover-right {
margin-left: 10px; margin-left: 10px;
} }
.popover.bottom {
.popover-bottom {
margin-top: 10px; margin-top: 10px;
} }
.popover.left {
.popover-left {
margin-left: -10px; margin-left: -10px;
} }
...@@ -4607,7 +4600,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro ...@@ -4607,7 +4600,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
padding: 9px 14px; padding: 9px 14px;
} }
.popover > .arrow, .popover > .arrow:after { .popover-arrow, .popover-arrow:after {
position: absolute; position: absolute;
display: block; display: block;
width: 0; width: 0;
...@@ -4616,65 +4609,68 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro ...@@ -4616,65 +4609,68 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
border-style: solid; border-style: solid;
} }
.popover > .arrow { .popover-arrow {
border-width: 11px; border-width: 11px;
} }
.popover > .arrow:after { .popover-arrow:after {
content: ""; content: "";
border-width: 10px; border-width: 10px;
} }
.popover.top > .arrow { .popover-top > .popover-arrow {
bottom: -11px; bottom: -11px;
left: 50%; left: 50%;
margin-left: -11px; margin-left: -11px;
border-top-color: rgba(0, 0, 0, .25); border-top-color: rgba(0, 0, 0, .25);
border-bottom-width: 0; border-bottom-width: 0;
} }
.popover.top > .arrow:after { .popover-top > .popover-arrow:after {
bottom: 1px; bottom: 1px;
margin-left: -10px; margin-left: -10px;
content: ""; content: "";
border-top-color: #fff; border-top-color: #fff;
border-bottom-width: 0; border-bottom-width: 0;
} }
.popover.right > .arrow {
.popover-right > .popover-arrow {
top: 50%; top: 50%;
left: -11px; left: -11px;
margin-top: -11px; margin-top: -11px;
border-right-color: rgba(0, 0, 0, .25); border-right-color: rgba(0, 0, 0, .25);
border-left-width: 0; border-left-width: 0;
} }
.popover.right > .arrow:after { .popover-right > .popover-arrow:after {
bottom: -10px; bottom: -10px;
left: 1px; left: 1px;
content: ""; content: "";
border-right-color: #fff; border-right-color: #fff;
border-left-width: 0; border-left-width: 0;
} }
.popover.bottom > .arrow {
.popover-bottom > .popover-arrow {
top: -11px; top: -11px;
left: 50%; left: 50%;
margin-left: -11px; margin-left: -11px;
border-top-width: 0; border-top-width: 0;
border-bottom-color: rgba(0, 0, 0, .25); border-bottom-color: rgba(0, 0, 0, .25);
} }
.popover.bottom > .arrow:after { .popover-bottom > .popover-arrow:after {
top: 1px; top: 1px;
margin-left: -10px; margin-left: -10px;
content: ""; content: "";
border-top-width: 0; border-top-width: 0;
border-bottom-color: #fff; border-bottom-color: #fff;
} }
.popover.left > .arrow {
.popover-left > .popover-arrow {
top: 50%; top: 50%;
right: -11px; right: -11px;
margin-top: -11px; margin-top: -11px;
border-right-width: 0; border-right-width: 0;
border-left-color: rgba(0, 0, 0, .25); border-left-color: rgba(0, 0, 0, .25);
} }
.popover.left > .arrow:after { .popover-left > .popover-arrow:after {
right: 1px; right: 1px;
bottom: -10px; bottom: -10px;
content: ""; content: "";
...@@ -4901,11 +4897,11 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro ...@@ -4901,11 +4897,11 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
margin-left: auto; margin-left: auto;
} }
.pull-right, .navbar-right { .pull-right {
float: right !important; float: right !important;
} }
.pull-left, .navbar-left { .pull-left {
float: left !important; float: left !important;
} }
......
docs/_includes/js/popovers.html
+ 10
- 10
View file @ 54b03c27
...@@ -39,24 +39,24 @@ $(function () { ...@@ -39,24 +39,24 @@ $(function () {
<h3>Static popover</h3> <h3>Static popover</h3>
<p>Four options are available: top, right, bottom, and left aligned.</p> <p>Four options are available: top, right, bottom, and left aligned.</p>
<div class="bs-example bs-example-popover"> <div class="bs-example bs-example-popover">
<div class="popover top"> <div class="popover popover-top">
<div class="arrow"></div> <div class="popover-arrow"></div>
<h3 class="popover-title">Popover top</h3> <h3 class="popover-title">Popover top</h3>
<div class="popover-content"> <div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div> </div>
</div> </div>
<div class="popover right"> <div class="popover popover-right">
<div class="arrow"></div> <div class="popover-arrow"></div>
<h3 class="popover-title">Popover right</h3> <h3 class="popover-title">Popover right</h3>
<div class="popover-content"> <div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div> </div>
</div> </div>
<div class="popover bottom"> <div class="popover popover-bottom">
<div class="arrow"></div> <div class="popover-arrow"></div>
<h3 class="popover-title">Popover bottom</h3> <h3 class="popover-title">Popover bottom</h3>
<div class="popover-content"> <div class="popover-content">
...@@ -64,8 +64,8 @@ $(function () { ...@@ -64,8 +64,8 @@ $(function () {
</div> </div>
</div> </div>
<div class="popover left"> <div class="popover popover-left">
<div class="arrow"></div> <div class="popover-arrow"></div>
<h3 class="popover-title">Popover left</h3> <h3 class="popover-title">Popover left</h3>
<div class="popover-content"> <div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
...@@ -207,12 +207,12 @@ sagittis lacus vel augue laoreet rutrum faucibus."> ...@@ -207,12 +207,12 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
<tr> <tr>
<td>template</td> <td>template</td>
<td>string</td> <td>string</td>
<td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td> <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="popover-arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
<td> <td>
<p>Base HTML to use when creating the popover.</p> <p>Base HTML to use when creating the popover.</p>
<p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p> <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p>
<p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p> <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p>
<p><code>.arrow</code> will become the popover's arrow.</p> <p><code>.popover-arrow</code> will become the popover's arrow.</p>
<p>The outermost wrapper element should have the <code>.popover</code> class.</p> <p>The outermost wrapper element should have the <code>.popover</code> class.</p>
</td> </td>
</tr> </tr>
......
docs/_includes/js/tooltips.html
+ 4
- 4
View file @ 54b03c27
...@@ -12,25 +12,25 @@ ...@@ -12,25 +12,25 @@
<h3>Static tooltip</h3> <h3>Static tooltip</h3>
<p>Four options are available: top, right, bottom, and left aligned.</p> <p>Four options are available: top, right, bottom, and left aligned.</p>
<div class="bs-example bs-example-tooltip"> <div class="bs-example bs-example-tooltip">
<div class="tooltip left" role="tooltip"> <div class="tooltip tooltip-left" role="tooltip">
<div class="tooltip-arrow"></div> <div class="tooltip-arrow"></div>
<div class="tooltip-inner"> <div class="tooltip-inner">
Tooltip on the left Tooltip on the left
</div> </div>
</div> </div>
<div class="tooltip top" role="tooltip"> <div class="tooltip tooltip-top" role="tooltip">
<div class="tooltip-arrow"></div> <div class="tooltip-arrow"></div>
<div class="tooltip-inner"> <div class="tooltip-inner">
Tooltip on the top Tooltip on the top
</div> </div>
</div> </div>
<div class="tooltip bottom" role="tooltip"> <div class="tooltip tooltip-bottom" role="tooltip">
<div class="tooltip-arrow"></div> <div class="tooltip-arrow"></div>
<div class="tooltip-inner"> <div class="tooltip-inner">
Tooltip on the bottom Tooltip on the bottom
</div> </div>
</div> </div>
<div class="tooltip right" role="tooltip"> <div class="tooltip tooltip-right" role="tooltip">
<div class="tooltip-arrow"></div> <div class="tooltip-arrow"></div>
<div class="tooltip-inner"> <div class="tooltip-inner">
Tooltip on the right Tooltip on the right
......
docs/javascript/popovers.md
+ 10
- 10
View file @ 54b03c27
...@@ -43,24 +43,24 @@ $(function () { ...@@ -43,24 +43,24 @@ $(function () {
Four options are available: top, right, bottom, and left aligned. Four options are available: top, right, bottom, and left aligned.
<div class="bs-example bs-example-popover"> <div class="bs-example bs-example-popover">
<div class="popover top"> <div class="popover popover-top">
<div class="arrow"></div> <div class="popover-arrow"></div>
<h3 class="popover-title">Popover top</h3> <h3 class="popover-title">Popover top</h3>
<div class="popover-content"> <div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div> </div>
</div> </div>
<div class="popover right"> <div class="popover popover-right">
<div class="arrow"></div> <div class="popover-arrow"></div>
<h3 class="popover-title">Popover right</h3> <h3 class="popover-title">Popover right</h3>
<div class="popover-content"> <div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div> </div>
</div> </div>
<div class="popover bottom"> <div class="popover popover-bottom">
<div class="arrow"></div> <div class="popover-arrow"></div>
<h3 class="popover-title">Popover bottom</h3> <h3 class="popover-title">Popover bottom</h3>
<div class="popover-content"> <div class="popover-content">
...@@ -68,8 +68,8 @@ Four options are available: top, right, bottom, and left aligned. ...@@ -68,8 +68,8 @@ Four options are available: top, right, bottom, and left aligned.
</div> </div>
</div> </div>
<div class="popover left"> <div class="popover popover-left">
<div class="arrow"></div> <div class="popover-arrow"></div>
<h3 class="popover-title">Popover left</h3> <h3 class="popover-title">Popover left</h3>
<div class="popover-content"> <div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
...@@ -222,12 +222,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap ...@@ -222,12 +222,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<tr> <tr>
<td>template</td> <td>template</td>
<td>string</td> <td>string</td>
<td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td> <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="popover-arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
<td> <td>
<p>Base HTML to use when creating the popover.</p> <p>Base HTML to use when creating the popover.</p>
<p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p> <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p>
<p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p> <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p>
<p><code>.arrow</code> will become the popover's arrow.</p> <p><code>.popover-arrow</code> will become the popover's arrow.</p>
<p>The outermost wrapper element should have the <code>.popover</code> class.</p> <p>The outermost wrapper element should have the <code>.popover</code> class.</p>
</td> </td>
</tr> </tr>
......
js/popover.js
+ 3
- 3
View file @ 54b03c27
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
placement: 'right', placement: 'right',
trigger: 'click', trigger: 'click',
content: '', content: '',
template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' template: '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
}) })
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
this.options.html ? (typeof content == 'string' ? 'html' : 'append') : 'text' this.options.html ? (typeof content == 'string' ? 'html' : 'append') : 'text'
](content) ](content)
$tip.removeClass('fade top bottom left right in') $tip.removeClass('fade popover-top popover-bottom popover-left popover-right in')
// IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do // IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
// this manually by checking the contents. // this manually by checking the contents.
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
} }
Popover.prototype.arrow = function () { Popover.prototype.arrow = function () {
return (this.$arrow = this.$arrow || this.tip().find('.arrow')) return (this.$arrow = this.$arrow || this.tip().find('.popover-arrow'))
} }
Popover.prototype.tip = function () { Popover.prototype.tip = function () {
......
js/tests/unit/popover.js
+ 1
- 1
View file @ 54b03c27
...@@ -141,7 +141,7 @@ $(function () { ...@@ -141,7 +141,7 @@ $(function () {
.bootstrapPopover({ .bootstrapPopover({
title: 'Test', title: 'Test',
content: 'Test', content: 'Test',
template: '<div class="popover foobar"><div class="arrow"></div><div class="inner"><h3 class="title"/><div class="content"><p/></div></div></div>' template: '<div class="popover foobar"><div class="popover-arrow"></div><div class="inner"><h3 class="title"/><div class="content"><p/></div></div></div>'
}) })
$popover.bootstrapPopover('show') $popover.bootstrapPopover('show')
......
js/tests/unit/tooltip.js
+ 12
- 12
View file @ 54b03c27
...@@ -85,7 +85,7 @@ $(function () { ...@@ -85,7 +85,7 @@ $(function () {
.bootstrapTooltip({ placement: 'bottom' }) .bootstrapTooltip({ placement: 'bottom' })
$tooltip.bootstrapTooltip('show') $tooltip.bootstrapTooltip('show')
ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied') ok($('.tooltip').is('.fade.tooltip-bottom.in'), 'has correct classes applied')
$tooltip.bootstrapTooltip('hide') $tooltip.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'tooltip removed') equal($('.tooltip').length, 0, 'tooltip removed')
...@@ -300,8 +300,8 @@ $(function () { ...@@ -300,8 +300,8 @@ $(function () {
test('should add position class before positioning so that position-specific styles are taken into account', function () { test('should add position class before positioning so that position-specific styles are taken into account', function () {
var styles = '<style>' var styles = '<style>'
+ '.tooltip.right { white-space: nowrap; }' + '.tooltip.tooltip-right { white-space: nowrap; }'
+ '.tooltip.right .tooltip-inner { max-width: none; }' + '.tooltip.tooltip-right .tooltip-inner { max-width: none; }'
+ '</style>' + '</style>'
var $styles = $(styles).appendTo('head') var $styles = $(styles).appendTo('head')
...@@ -384,7 +384,7 @@ $(function () { ...@@ -384,7 +384,7 @@ $(function () {
.bootstrapTooltip({ placement: 'auto' }) .bootstrapTooltip({ placement: 'auto' })
$topTooltip.bootstrapTooltip('show') $topTooltip.bootstrapTooltip('show')
ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned to bottom') ok($('.tooltip').is('.tooltip-bottom'), 'top positioned tooltip is dynamically positioned to bottom')
$topTooltip.bootstrapTooltip('hide') $topTooltip.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'top positioned tooltip removed from dom') equal($('.tooltip').length, 0, 'top positioned tooltip removed from dom')
...@@ -394,7 +394,7 @@ $(function () { ...@@ -394,7 +394,7 @@ $(function () {
.bootstrapTooltip({ placement: 'right auto' }) .bootstrapTooltip({ placement: 'right auto' })
$rightTooltip.bootstrapTooltip('show') $rightTooltip.bootstrapTooltip('show')
ok($('.tooltip').is('.left'), 'right positioned tooltip is dynamically positioned left') ok($('.tooltip').is('.tooltip-left'), 'right positioned tooltip is dynamically positioned left')
$rightTooltip.bootstrapTooltip('hide') $rightTooltip.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'right positioned tooltip removed from dom') equal($('.tooltip').length, 0, 'right positioned tooltip removed from dom')
...@@ -404,7 +404,7 @@ $(function () { ...@@ -404,7 +404,7 @@ $(function () {
.bootstrapTooltip({ placement: 'auto left' }) .bootstrapTooltip({ placement: 'auto left' })
$leftTooltip.bootstrapTooltip('show') $leftTooltip.bootstrapTooltip('show')
ok($('.tooltip').is('.right'), 'left positioned tooltip is dynamically positioned right') ok($('.tooltip').is('.tooltip-right'), 'left positioned tooltip is dynamically positioned right')
$leftTooltip.bootstrapTooltip('hide') $leftTooltip.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'left positioned tooltip removed from dom') equal($('.tooltip').length, 0, 'left positioned tooltip removed from dom')
...@@ -430,7 +430,7 @@ $(function () { ...@@ -430,7 +430,7 @@ $(function () {
}) })
$target.bootstrapTooltip('show') $target.bootstrapTooltip('show')
ok($('.tooltip').is('.top'), 'top positioned tooltip is dynamically positioned to top') ok($('.tooltip').is('.tooltip-top'), 'top positioned tooltip is dynamically positioned to top')
$target.bootstrapTooltip('hide') $target.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'tooltip removed from dom') equal($('.tooltip').length, 0, 'tooltip removed from dom')
...@@ -455,7 +455,7 @@ $(function () { ...@@ -455,7 +455,7 @@ $(function () {
}) })
$target.bootstrapTooltip('show') $target.bootstrapTooltip('show')
ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned to bottom') ok($('.tooltip').is('.tooltip-bottom'), 'top positioned tooltip is dynamically positioned to bottom')
$target.bootstrapTooltip('hide') $target.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'tooltip removed from dom') equal($('.tooltip').length, 0, 'tooltip removed from dom')
...@@ -481,7 +481,7 @@ $(function () { ...@@ -481,7 +481,7 @@ $(function () {
$('#scrollable-div').scrollTop(100) $('#scrollable-div').scrollTop(100)
$target.bootstrapTooltip('show') $target.bootstrapTooltip('show')
ok($('.tooltip').is('.fade.top.in'), 'has correct classes applied') ok($('.tooltip').is('.fade.tooltip-top.in'), 'has correct classes applied')
$target.bootstrapTooltip('hide') $target.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'tooltip removed from dom') equal($('.tooltip').length, 0, 'tooltip removed from dom')
...@@ -507,7 +507,7 @@ $(function () { ...@@ -507,7 +507,7 @@ $(function () {
$('#scrollable-div').scrollTop(200) $('#scrollable-div').scrollTop(200)
$target.bootstrapTooltip('show') $target.bootstrapTooltip('show')
ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied') ok($('.tooltip').is('.fade.tooltip-bottom.in'), 'has correct classes applied')
$target.bootstrapTooltip('hide') $target.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'tooltip removed from dom') equal($('.tooltip').length, 0, 'tooltip removed from dom')
...@@ -537,7 +537,7 @@ $(function () { ...@@ -537,7 +537,7 @@ $(function () {
$('#scrollable-div').scrollTop(200) $('#scrollable-div').scrollTop(200)
$target.bootstrapTooltip('show') $target.bootstrapTooltip('show')
ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied') ok($('.tooltip').is('.fade.tooltip-bottom.in'), 'has correct classes applied')
$target.bootstrapTooltip('hide') $target.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'tooltip removed from dom') equal($('.tooltip').length, 0, 'tooltip removed from dom')
...@@ -563,7 +563,7 @@ $(function () { ...@@ -563,7 +563,7 @@ $(function () {
$('#scrollable-div').scrollTop(400) $('#scrollable-div').scrollTop(400)
$target.bootstrapTooltip('show') $target.bootstrapTooltip('show')
ok($('.tooltip').is('.fade.top.in'), 'has correct classes applied') ok($('.tooltip').is('.fade.tooltip-top.in'), 'has correct classes applied')
$target.bootstrapTooltip('hide') $target.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'tooltip removed from dom') equal($('.tooltip').length, 0, 'tooltip removed from dom')
......
js/tooltip.js
+ 5
- 5
View file @ 54b03c27
...@@ -177,7 +177,7 @@ ...@@ -177,7 +177,7 @@
$tip $tip
.detach() .detach()
.css({ top: 0, left: 0, display: 'block' }) .css({ top: 0, left: 0, display: 'block' })
.addClass(placement) .addClass(this.type + '-' + placement)
.data('bs.' + this.type, this) .data('bs.' + this.type, this)
this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element) this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
...@@ -187,7 +187,7 @@ ...@@ -187,7 +187,7 @@
var actualHeight = $tip[0].offsetHeight var actualHeight = $tip[0].offsetHeight
if (autoPlace) { if (autoPlace) {
var orgPlacement = placement var origPlacement = placement
var $container = this.options.container ? $(this.options.container) : this.$element.parent() var $container = this.options.container ? $(this.options.container) : this.$element.parent()
var containerDim = this.getPosition($container) var containerDim = this.getPosition($container)
...@@ -198,8 +198,8 @@ ...@@ -198,8 +198,8 @@
placement placement
$tip $tip
.removeClass(orgPlacement) .removeClass(this.type + '-' + origPlacement)
.addClass(placement) .addClass(this.type + '-' + placement)
} }
var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight) var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)
...@@ -283,7 +283,7 @@ ...@@ -283,7 +283,7 @@
var title = this.getTitle() var title = this.getTitle()
$tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title) $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title)
$tip.removeClass('fade in top bottom left right') $tip.removeClass('fade in tooltip-top tooltip-bottom tooltip-left tooltip-right')
} }
Tooltip.prototype.hide = function (callback) { Tooltip.prototype.hide = function (callback) {
......
scss/_popover.scss
+ 57
- 59
View file @ 54b03c27
...@@ -24,14 +24,14 @@ ...@@ -24,14 +24,14 @@
border: 1px solid $popover-border-color; border: 1px solid $popover-border-color;
@include border-radius($border-radius-lg); @include border-radius($border-radius-lg);
@include box-shadow(0 5px 10px rgba(0,0,0,.2)); @include box-shadow(0 5px 10px rgba(0,0,0,.2));
// Offset the popover to account for the popover arrow
&.top { margin-top: -$popover-arrow-width; }
&.right { margin-left: $popover-arrow-width; }
&.bottom { margin-top: $popover-arrow-width; }
&.left { margin-left: -$popover-arrow-width; }
} }
// Offset the popover to account for the popover arrow
.popover-top { margin-top: -$popover-arrow-width; }
.popover-right { margin-left: $popover-arrow-width; }
.popover-bottom { margin-top: $popover-arrow-width; }
.popover-left { margin-left: -$popover-arrow-width; }
.popover-title { .popover-title {
padding: 8px 14px; padding: 8px 14px;
margin: 0; // reset heading margin margin: 0; // reset heading margin
...@@ -47,9 +47,9 @@ ...@@ -47,9 +47,9 @@
// Arrows // Arrows
// //
// .arrow is outer, .arrow:after is inner // .popover-arrow is outer, .popover-arrow:after is inner
.popover > .arrow { .popover-arrow {
&, &,
&:after { &:after {
position: absolute; position: absolute;
...@@ -60,70 +60,68 @@ ...@@ -60,70 +60,68 @@
border-style: solid; border-style: solid;
} }
} }
.popover > .arrow { .popover-arrow {
border-width: $popover-arrow-outer-width; border-width: $popover-arrow-outer-width;
} }
.popover > .arrow:after { .popover-arrow:after {
content: ""; content: "";
border-width: $popover-arrow-width; border-width: $popover-arrow-width;
} }
.popover { .popover-top > .popover-arrow {
&.top > .arrow { bottom: -$popover-arrow-outer-width;
bottom: -$popover-arrow-outer-width; left: 50%;
left: 50%; margin-left: -$popover-arrow-outer-width;
margin-left: -$popover-arrow-outer-width; border-top-color: $popover-arrow-outer-color;
border-top-color: $popover-arrow-outer-color; border-bottom-width: 0;
&:after {
bottom: 1px;
margin-left: -$popover-arrow-width;
content: "";
border-top-color: $popover-arrow-color;
border-bottom-width: 0; border-bottom-width: 0;
&:after {
bottom: 1px;
margin-left: -$popover-arrow-width;
content: "";
border-top-color: $popover-arrow-color;
border-bottom-width: 0;
}
} }
&.right > .arrow { }
top: 50%; .popover-right > .popover-arrow {
left: -$popover-arrow-outer-width; top: 50%;
margin-top: -$popover-arrow-outer-width; left: -$popover-arrow-outer-width;
border-right-color: $popover-arrow-outer-color; margin-top: -$popover-arrow-outer-width;
border-right-color: $popover-arrow-outer-color;
border-left-width: 0;
&:after {
bottom: -$popover-arrow-width;
left: 1px;
content: "";
border-right-color: $popover-arrow-color;
border-left-width: 0; border-left-width: 0;
&:after {
bottom: -$popover-arrow-width;
left: 1px;
content: "";
border-right-color: $popover-arrow-color;
border-left-width: 0;
}
} }
&.bottom > .arrow { }
top: -$popover-arrow-outer-width; .popover-bottom > .popover-arrow {
left: 50%; top: -$popover-arrow-outer-width;
margin-left: -$popover-arrow-outer-width; left: 50%;
margin-left: -$popover-arrow-outer-width;
border-top-width: 0;
border-bottom-color: $popover-arrow-outer-color;
&:after {
top: 1px;
margin-left: -$popover-arrow-width;
content: "";
border-top-width: 0; border-top-width: 0;
border-bottom-color: $popover-arrow-outer-color; border-bottom-color: $popover-arrow-color;
&:after {
top: 1px;
margin-left: -$popover-arrow-width;
content: "";
border-top-width: 0;
border-bottom-color: $popover-arrow-color;
}
} }
}
&.left > .arrow { .popover-left > .popover-arrow {
top: 50%; top: 50%;
right: -$popover-arrow-outer-width; right: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width; margin-top: -$popover-arrow-outer-width;
border-right-width: 0;
border-left-color: $popover-arrow-outer-color;
&:after {
right: 1px;
bottom: -$popover-arrow-width;
content: "";
border-right-width: 0; border-right-width: 0;
border-left-color: $popover-arrow-outer-color; border-left-color: $popover-arrow-color;
&:after {
right: 1px;
bottom: -$popover-arrow-width;
content: "";
border-right-width: 0;
border-left-color: $popover-arrow-color;
}
} }
} }
scss/_tooltip.scss
+ 43
- 48
View file @ 54b03c27
...@@ -17,26 +17,23 @@ ...@@ -17,26 +17,23 @@
opacity: 0; opacity: 0;
&.in { opacity: $tooltip-opacity; } &.in { opacity: $tooltip-opacity; }
}
&.top { .tooltip-top {
padding: $tooltip-arrow-width 0; padding: $tooltip-arrow-width 0;
margin-top: -3px; margin-top: -3px;
} }
.tooltip-right {
&.right { padding: 0 $tooltip-arrow-width;
padding: 0 $tooltip-arrow-width; margin-left: 3px;
margin-left: 3px; }
} .tooltip-bottom {
padding: $tooltip-arrow-width 0;
&.bottom { margin-top: 3px;
padding: $tooltip-arrow-width 0; }
margin-top: 3px; .tooltip-left {
} padding: 0 $tooltip-arrow-width;
margin-left: -3px;
&.left {
padding: 0 $tooltip-arrow-width;
margin-left: -3px;
}
} }
// Wrapper for the tooltip content // Wrapper for the tooltip content
...@@ -58,33 +55,31 @@ ...@@ -58,33 +55,31 @@
border-color: transparent; border-color: transparent;
border-style: solid; border-style: solid;
} }
.tooltip { .tooltip-top .tooltip-arrow {
&.top .tooltip-arrow { bottom: 0;
bottom: 0; left: 50%;
left: 50%; margin-left: -$tooltip-arrow-width;
margin-left: -$tooltip-arrow-width; border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-width: $tooltip-arrow-width $tooltip-arrow-width 0; border-top-color: $tooltip-arrow-color;
border-top-color: $tooltip-arrow-color; }
} .tooltip-right .tooltip-arrow {
&.right .tooltip-arrow { top: 50%;
top: 50%; left: 0;
left: 0; margin-top: -$tooltip-arrow-width;
margin-top: -$tooltip-arrow-width; border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; border-right-color: $tooltip-arrow-color;
border-right-color: $tooltip-arrow-color; }
} .tooltip-left .tooltip-arrow {
&.left .tooltip-arrow { top: 50%;
top: 50%; right: 0;
right: 0; margin-top: -$tooltip-arrow-width;
margin-top: -$tooltip-arrow-width; border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; border-left-color: $tooltip-arrow-color;
border-left-color: $tooltip-arrow-color; }
} .tooltip-bottom .tooltip-arrow {
&.bottom .tooltip-arrow { top: 0;
top: 0; left: 50%;
left: 50%; margin-left: -$tooltip-arrow-width;
margin-left: -$tooltip-arrow-width; border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; border-bottom-color: $tooltip-arrow-color;
border-bottom-color: $tooltip-arrow-color;
}
} }
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment