rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-21 18:54:30 +01:00
Code Issues Actions Packages Releases Activity

Use consistent arrow class (#28105)

Browse Source
This commit is contained in:
Peter Blazejewicz 2019-02-11 11:27:14 +01:00 committed by XhmikosR
parent 049a500d18
commit cbd333185e
7 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/src/popover.js
View File

@ -29,7 +29,7 @@ const Default = {
trigger : 'click', trigger : 'click',
content : '', content : '',
template : '<div class="popover" role="tooltip">' + template : '<div class="popover" role="tooltip">' +
'<div class="arrow"></div>' + '<div class="popover-arrow"></div>' +
'<h3 class="popover-header"></h3>' + '<h3 class="popover-header"></h3>' +
'<div class="popover-body"></div></div>' '<div class="popover-body"></div></div>'
} }

6
js/src/tooltip.js
View File

@ -60,7 +60,7 @@ const AttachmentMap = {
const Default = { const Default = {
animation : true, animation : true,
template : '<div class="tooltip" role="tooltip">' + template : '<div class="tooltip" role="tooltip">' +
'<div class="arrow"></div>' + '<div class="tooltip-arrow"></div>' +
'<div class="tooltip-inner"></div></div>', '<div class="tooltip-inner"></div></div>',
trigger : 'hover focus', trigger : 'hover focus',
title : '', title : '',
@ -103,7 +103,7 @@ const ClassName = {
const Selector = { const Selector = {
TOOLTIP : '.tooltip', TOOLTIP : '.tooltip',
TOOLTIP_INNER : '.tooltip-inner', TOOLTIP_INNER : '.tooltip-inner',
ARROW : '.arrow' TOOLTIP_ARROW : '.tooltip-arrow'
} }
const Trigger = { const Trigger = {
@ -302,7 +302,7 @@ class Tooltip {
behavior: this.config.fallbackPlacement behavior: this.config.fallbackPlacement
}, },
arrow: { arrow: {
element: Selector.ARROW element: Selector.TOOLTIP_ARROW
}, },
preventOverflow: { preventOverflow: {
boundariesElement: this.config.boundary boundariesElement: this.config.boundary

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

@ -239,7 +239,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>'
}) })
.one('shown.bs.popover', function () { .one('shown.bs.popover', function () {
assert.notEqual($('.popover').length, 0, 'popover was inserted') assert.notEqual($('.popover').length, 0, 'popover was inserted')

10
scss/_popover.scss
View File

@ -17,7 +17,7 @@
@include border-radius($popover-border-radius); @include border-radius($popover-border-radius);
@include box-shadow($popover-box-shadow); @include box-shadow($popover-box-shadow);
.arrow { .popover-arrow {
position: absolute; position: absolute;
display: block; display: block;
width: $popover-arrow-width; width: $popover-arrow-width;
@ -38,7 +38,7 @@
.bs-popover-top { .bs-popover-top {
margin-bottom: $popover-arrow-height; margin-bottom: $popover-arrow-height;
> .arrow { > .popover-arrow {
bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
&::before { &::before {
@ -58,7 +58,7 @@
.bs-popover-right { .bs-popover-right {
margin-left: $popover-arrow-height; margin-left: $popover-arrow-height;
> .arrow { > .popover-arrow {
left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
width: $popover-arrow-height; width: $popover-arrow-height;
height: $popover-arrow-width; height: $popover-arrow-width;
@ -81,7 +81,7 @@
.bs-popover-bottom { .bs-popover-bottom {
margin-top: $popover-arrow-height; margin-top: $popover-arrow-height;
> .arrow { > .popover-arrow {
top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
&::before { &::before {
@ -113,7 +113,7 @@
.bs-popover-left { .bs-popover-left {
margin-right: $popover-arrow-height; margin-right: $popover-arrow-height;
> .arrow { > .popover-arrow {
right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
width: $popover-arrow-height; width: $popover-arrow-height;
height: $popover-arrow-width; height: $popover-arrow-width;

10
scss/_tooltip.scss
View File

@ -14,7 +14,7 @@
&.show { opacity: $tooltip-opacity; } &.show { opacity: $tooltip-opacity; }
.arrow { .tooltip-arrow {
position: absolute; position: absolute;
display: block; display: block;
width: $tooltip-arrow-width; width: $tooltip-arrow-width;
@ -32,7 +32,7 @@
.bs-tooltip-top { .bs-tooltip-top {
padding: $tooltip-arrow-height 0; padding: $tooltip-arrow-height 0;
.arrow { .tooltip-arrow {
bottom: 0; bottom: 0;
&::before { &::before {
@ -46,7 +46,7 @@
.bs-tooltip-right { .bs-tooltip-right {
padding: 0 $tooltip-arrow-height; padding: 0 $tooltip-arrow-height;
.arrow { .tooltip-arrow {
left: 0; left: 0;
width: $tooltip-arrow-height; width: $tooltip-arrow-height;
height: $tooltip-arrow-width; height: $tooltip-arrow-width;
@ -62,7 +62,7 @@
.bs-tooltip-bottom { .bs-tooltip-bottom {
padding: $tooltip-arrow-height 0; padding: $tooltip-arrow-height 0;
.arrow { .tooltip-arrow {
top: 0; top: 0;
&::before { &::before {
@ -76,7 +76,7 @@
.bs-tooltip-left { .bs-tooltip-left {
padding: 0 $tooltip-arrow-height; padding: 0 $tooltip-arrow-height;
.arrow { .tooltip-arrow {
right: 0; right: 0;
width: $tooltip-arrow-height; width: $tooltip-arrow-height;
height: $tooltip-arrow-width; height: $tooltip-arrow-width;

4
site/docs/4.3/components/popovers.md
View File

@ -212,12 +212,12 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
<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-header"&gt;&lt;/h3&gt;&lt;div class="popover-body"&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-header"&gt;&lt;/h3&gt;&lt;div class="popover-body"&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-header</code>.</p> <p>The popover's <code>title</code> will be injected into the <code>.popover-header</code>.</p>
<p>The popover's <code>content</code> will be injected into the <code>.popover-body</code>.</p> <p>The popover's <code>content</code> will be injected into the <code>.popover-body</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>

6
site/docs/4.3/components/tooltips.md
View File

@ -119,7 +119,7 @@ Additionally, do not rely solely on `hover` as the trigger for your tooltip, as
<!-- Generated markup by the plugin --> <!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip"> <div class="tooltip bs-tooltip-top" role="tooltip">
<div class="arrow"></div> <div class="tooltip-arrow"></div>
<div class="tooltip-inner"> <div class="tooltip-inner">
Some tooltip text! Some tooltip text!
</div> </div>
@ -210,11 +210,11 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
<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="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="tooltip-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>.arrow</code> will become the tooltip's arrow.</p> <p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p>
<p>The outermost wrapper element should have the <code>.tooltip</code> class and <code>role="tooltip"</code>.</p> <p>The outermost wrapper element should have the <code>.tooltip</code> class and <code>role="tooltip"</code>.</p>
</td> </td>
</tr> </tr>