rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-04-06 23:57:36 +02:00
Code Issues Actions 11 Packages Releases Activity

rename .arrow => .popover-arrow

Browse Source
This commit is contained in:
Chris Rebert 2014-12-17 18:58:01 -08:00
parent a1ce6a1968
commit 6a5bc63649
5 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,7 +40,7 @@ $(function () {
<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 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>
@ -48,7 +48,7 @@ $(function () {
</div> </div>
<div class="popover right"> <div class="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>
@ -56,7 +56,7 @@ $(function () {
</div> </div>
<div class="popover bottom"> <div class="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">
@ -65,7 +65,7 @@ $(function () {
</div> </div>
<div class="popover left"> <div class="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.">
<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>

12
docs/javascript/popovers.md
View File

@ -44,7 +44,7 @@ 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 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>
@ -52,7 +52,7 @@ Four options are available: top, right, bottom, and left aligned.
</div> </div>
<div class="popover right"> <div class="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>
@ -60,7 +60,7 @@ Four options are available: top, right, bottom, and left aligned.
</div> </div>
<div class="popover bottom"> <div class="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">
@ -69,7 +69,7 @@ Four options are available: top, right, bottom, and left aligned.
</div> </div>
<div class="popover left"> <div class="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
<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>

4
js/popover.js
View File

@ -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>'
}) })
@ -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 () {

2
js/tests/unit/popover.js
View File

@ -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')

16
scss/_popover.scss
View File

@ -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 > .popover-arrow {
&, &,
&:after { &:after {
position: absolute; position: absolute;
@ -60,16 +60,16 @@
border-style: solid; border-style: solid;
} }
} }
.popover > .arrow { .popover > .popover-arrow {
border-width: $popover-arrow-outer-width; border-width: $popover-arrow-outer-width;
} }
.popover > .arrow:after { .popover > .popover-arrow:after {
content: ""; content: "";
border-width: $popover-arrow-width; border-width: $popover-arrow-width;
} }
.popover { .popover {
&.top > .arrow { &.top > .popover-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;
@ -83,7 +83,7 @@
border-bottom-width: 0; border-bottom-width: 0;
} }
} }
&.right > .arrow { &.right > .popover-arrow {
top: 50%; top: 50%;
left: -$popover-arrow-outer-width; left: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width; margin-top: -$popover-arrow-outer-width;
@ -97,7 +97,7 @@
border-left-width: 0; border-left-width: 0;
} }
} }
&.bottom > .arrow { &.bottom > .popover-arrow {
top: -$popover-arrow-outer-width; top: -$popover-arrow-outer-width;
left: 50%; left: 50%;
margin-left: -$popover-arrow-outer-width; margin-left: -$popover-arrow-outer-width;
@ -112,7 +112,7 @@
} }
} }
&.left > .arrow { &.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;