mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-08 22:56:46 +02:00
Code Issues Releases Wiki Activity

Fix some css for the arrow of Popover/Tooltip + update documentation

Browse Source
This commit is contained in:
Johann-S
2017-04-19 10:59:10 +02:00
parent 18e4e851e2
commit fc8b85b626
5 changed files with 54 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/components/popovers.md
View File

@@ -231,12 +231,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="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><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> <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>.popover-arrow</code> will become the popover's arrow.</p> <p><code>.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>

6
docs/components/tooltips.md
View File

@@ -136,7 +136,7 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
<!-- Generated markup by the plugin --> <!-- Generated markup by the plugin -->
<div class="tooltip tooltip-top" role="tooltip"> <div class="tooltip tooltip-top" role="tooltip">
<div class="tooltip-arrow"></div> <div class="arrow"></div>
<div class="tooltip-inner"> <div class="tooltip-inner">
Some tooltip text! Some tooltip text!
</div> </div>
@@ -209,11 +209,11 @@ 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="tooltip" role="tooltip"&gt;&lt;div class="tooltip-arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td> <td><code>'&lt;div class="tooltip" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
<td> <td>
<p>Base HTML to use when creating the tooltip.</p> <p>Base HTML to use when creating the tooltip.</p>
<p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p> <p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p>
<p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p> <p><code>.arrow</code> will become the tooltip's arrow.</p>
<p>The outermost wrapper element should have the <code>.tooltip</code> class.</p> <p>The outermost wrapper element should have the <code>.tooltip</code> class.</p>
</td> </td>
</tr> </tr>

4
js/src/tooltip.js
View File

@@ -289,7 +289,9 @@ const Tooltip = (($) => {
} }
}, },
onCreate : (data) => { onCreate : (data) => {
if (data.originalPlacement !== data.placement) {
this._handlePopperPlacementChange(data) this._handlePopperPlacementChange(data)
}
}, },
onUpdate : (data) => { onUpdate : (data) => {
this._handlePopperPlacementChange(data) this._handlePopperPlacementChange(data)
@@ -644,11 +646,9 @@ const Tooltip = (($) => {
} }
_handlePopperPlacementChange(data) { _handlePopperPlacementChange(data) {
if (data.originalPlacement !== data.placement) {
this._cleanTipClass() this._cleanTipClass()
this.addAttachmentClass(this._getAttachment(data.placement)) this.addAttachmentClass(this._getAttachment(data.placement))
} }
}
// static // static

78
scss/_popover.scss
View File

@@ -18,25 +18,47 @@
@include border-radius($border-radius-lg); @include border-radius($border-radius-lg);
@include box-shadow($popover-box-shadow); @include box-shadow($popover-box-shadow);
// Arrows
//
// .popover-arrow is outer, .popover-arrow::after is inner
.arrow::before,
.arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.arrow::before {
content: "";
border-width: $popover-arrow-outer-width;
}
.arrow::after {
content: "";
border-width: $popover-arrow-width;
}
// Popover directions // Popover directions
&.bs-popover-top { &.bs-popover-top {
margin-bottom: $popover-arrow-width; margin-bottom: $popover-arrow-width;
::before, .arrow::before,
::after { .arrow::after {
left: 50%; left: 50%;
border-bottom-width: 0; border-bottom-width: 0;
} }
::before { .arrow::before {
bottom: -$popover-arrow-outer-width; bottom: -$popover-arrow-outer-width;
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;
} }
::after { .arrow::after {
bottom: -($popover-arrow-outer-width - 1); bottom: -($popover-arrow-outer-width - 1);
margin-left: -$popover-arrow-width; margin-left: -$popover-arrow-width;
border-top-color: $popover-arrow-color; border-top-color: $popover-arrow-color;
@@ -46,19 +68,19 @@
&.bs-popover-right { &.bs-popover-right {
margin-left: $popover-arrow-width; margin-left: $popover-arrow-width;
::before, .arrow::before,
::after { .arrow::after {
top: 50%; top: 50%;
border-left-width: 0; border-left-width: 0;
} }
::before { .arrow::before {
left: -$popover-arrow-outer-width; left: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width; margin-top: -$popover-arrow-outer-width;
border-right-color: $popover-arrow-outer-color; border-right-color: $popover-arrow-outer-color;
} }
::after { .arrow::after {
left: -($popover-arrow-outer-width - 1); left: -($popover-arrow-outer-width - 1);
margin-top: -($popover-arrow-outer-width - 1); margin-top: -($popover-arrow-outer-width - 1);
border-right-color: $popover-arrow-color; border-right-color: $popover-arrow-color;
@@ -68,19 +90,19 @@
&.bs-popover-bottom { &.bs-popover-bottom {
margin-top: $popover-arrow-width; margin-top: $popover-arrow-width;
::before, .arrow::before,
::after { .arrow::after {
left: 50%; left: 50%;
border-top-width: 0; border-top-width: 0;
} }
::before { .arrow::before {
top: -$popover-arrow-outer-width; top: -$popover-arrow-outer-width;
margin-left: -$popover-arrow-outer-width; margin-left: -$popover-arrow-outer-width;
border-bottom-color: $popover-arrow-outer-color; border-bottom-color: $popover-arrow-outer-color;
} }
::after { .arrow::after {
top: -($popover-arrow-outer-width - 1); top: -($popover-arrow-outer-width - 1);
margin-left: -$popover-arrow-width; margin-left: -$popover-arrow-width;
border-bottom-color: $popover-arrow-color; border-bottom-color: $popover-arrow-color;
@@ -102,19 +124,19 @@
&.bs-popover-left { &.bs-popover-left {
margin-right: $popover-arrow-width; margin-right: $popover-arrow-width;
::before, .arrow::before,
::after { .arrow::after {
top: 50%; top: 50%;
border-right-width: 0; border-right-width: 0;
} }
::before { .arrow::before {
right: -$popover-arrow-outer-width; right: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width; margin-top: -$popover-arrow-outer-width;
border-left-color: $popover-arrow-outer-color; border-left-color: $popover-arrow-outer-color;
} }
::after { .arrow::after {
right: -($popover-arrow-outer-width - 1); right: -($popover-arrow-outer-width - 1);
margin-top: -($popover-arrow-outer-width - 1); margin-top: -($popover-arrow-outer-width - 1);
border-left-color: $popover-arrow-color; border-left-color: $popover-arrow-color;
@@ -143,27 +165,3 @@
padding: $popover-content-padding-y $popover-content-padding-x; padding: $popover-content-padding-y $popover-content-padding-x;
color: $popover-content-color; color: $popover-content-color;
} }
// Arrows
//
// .popover-arrow is outer, .popover-arrow::after is inner
.arrow::before,
.arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.arrow::before {
content: "";
border-width: $popover-arrow-outer-width;
}
.arrow::after {
content: "";
border-width: $popover-arrow-width;
}

16
scss/_tooltip.scss
View File

@@ -65,6 +65,14 @@
border-left-color: $tooltip-arrow-color; border-left-color: $tooltip-arrow-color;
} }
} }
.arrow::before {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
} }
// Wrapper for the tooltip content // Wrapper for the tooltip content
@@ -75,12 +83,4 @@
text-align: center; text-align: center;
background-color: $tooltip-bg; background-color: $tooltip-bg;
@include border-radius($border-radius); @include border-radius($border-radius);
.arrow::before {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
} }