rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Merge branch 'v4-dev' into v4-docs-streamlined

Browse Source
This commit is contained in:
Mark Otto 2017-05-31 20:46:29 -07:00
commit 332d882cdb
7 changed files with 28 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/4.0/components/popovers.md
View File

@ -51,7 +51,7 @@ Four options are available: top, right, bottom, and left aligned.
<div class="bd-example bd-example-popover-static"> <div class="bd-example bd-example-popover-static">
<div class="popover bs-popover-top bs-popover-top-docs"> <div class="popover bs-popover-top bs-popover-top-docs">
<div class="arrow" x-arrow></div> <div class="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>
@ -59,7 +59,7 @@ Four options are available: top, right, bottom, and left aligned.
</div> </div>
<div class="popover bs-popover-right bs-popover-right-docs"> <div class="popover bs-popover-right bs-popover-right-docs">
<div class="arrow" x-arrow></div> <div class="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>
@ -67,7 +67,7 @@ Four options are available: top, right, bottom, and left aligned.
</div> </div>
<div class="popover bs-popover-bottom bs-popover-bottom-docs"> <div class="popover bs-popover-bottom bs-popover-bottom-docs">
<div class="arrow" x-arrow></div> <div class="arrow"></div>
<h3 class="popover-title">Popover bottom</h3> <h3 class="popover-title">Popover bottom</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>
@ -75,7 +75,7 @@ Four options are available: top, right, bottom, and left aligned.
</div> </div>
<div class="popover bs-popover-left bs-popover-left-docs"> <div class="popover bs-popover-left bs-popover-left-docs">
<div class="arrow" x-arrow></div> <div class="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>
@ -228,7 +228,7 @@ 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" x-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>

12
docs/4.0/components/tooltips.md
View File

@ -46,25 +46,25 @@ Four options are available: top, right, bottom, and left aligned.
<div class="bd-example bd-example-tooltip-static"> <div class="bd-example bd-example-tooltip-static">
<div class="tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip"> <div class="tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
<div class="arrow" x-arrow></div> <div class="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 bs-tooltip-right bs-tooltip-right-docs" role="tooltip"> <div class="tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
<div class="arrow" x-arrow></div> <div class="arrow"></div>
<div class="tooltip-inner"> <div class="tooltip-inner">
Tooltip on the right Tooltip on the right
</div> </div>
</div> </div>
<div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip"> <div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
<div class="arrow" x-arrow></div> <div class="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 bs-tooltip-left bs-tooltip-left-docs" role="tooltip"> <div class="tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
<div class="arrow" x-arrow></div> <div class="arrow"></div>
<div class="tooltip-inner"> <div class="tooltip-inner">
Tooltip on the left Tooltip on the left
</div> </div>
@ -134,7 +134,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 bs-tooltip-top" role="tooltip"> <div class="tooltip bs-tooltip-top" role="tooltip">
<div class="arrow" x-arrow></div> <div class="arrow"></div>
<div class="tooltip-inner"> <div class="tooltip-inner">
Some tooltip text! Some tooltip text!
</div> </div>
@ -207,7 +207,7 @@ 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="arrow" x-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>

2
js/src/popover.js
View File

@ -30,7 +30,7 @@ const Popover = (($) => {
trigger : 'click', trigger : 'click',
content : '', content : '',
template : '<div class="popover" role="tooltip">' template : '<div class="popover" role="tooltip">'
+ '<div class="arrow" x-arrow></div>' + '<div class="arrow"></div>'
+ '<h3 class="popover-title"></h3>' + '<h3 class="popover-title"></h3>'
+ '<div class="popover-content"></div></div>' + '<div class="popover-content"></div></div>'
}) })

22
js/src/tooltip.js
View File

@ -61,7 +61,7 @@ const Tooltip = (($) => {
const Default = { const Default = {
animation : true, animation : true,
template : '<div class="tooltip" role="tooltip">' template : '<div class="tooltip" role="tooltip">'
+ '<div class="arrow" x-arrow></div>' + '<div class="arrow"></div>'
+ '<div class="tooltip-inner"></div></div>', + '<div class="tooltip-inner"></div></div>',
trigger : 'hover focus', trigger : 'hover focus',
title : '', title : '',
@ -99,7 +99,8 @@ const Tooltip = (($) => {
const Selector = { const Selector = {
TOOLTIP : '.tooltip', TOOLTIP : '.tooltip',
TOOLTIP_INNER : '.tooltip-inner' TOOLTIP_INNER : '.tooltip-inner',
ARROW : '.arrow'
} }
const Trigger = { const Trigger = {
@ -288,16 +289,19 @@ const Tooltip = (($) => {
$(this.element).trigger(this.constructor.Event.INSERTED) $(this.element).trigger(this.constructor.Event.INSERTED)
this._popper = new Popper(this.element, tip, { this._popper = new Popper(this.element, tip, {
placement : attachment, placement: attachment,
modifiers : { modifiers: {
offset : { offset: {
offset : this.config.offset offset: this.config.offset
}, },
flip : { flip: {
behavior : this.config.fallbackPlacement behavior: this.config.fallbackPlacement
},
arrow: {
element: Selector.ARROW
} }
}, },
onCreate : (data) => { onCreate: (data) => {
if (data.originalPlacement !== data.placement) { if (data.originalPlacement !== data.placement) {
this._handlePopperPlacementChange(data) this._handlePopperPlacementChange(data)
} }

2
package.json
View File

@ -77,7 +77,7 @@
"babel-cli": "^6.24.1", "babel-cli": "^6.24.1",
"babel-eslint": "^7.2.3", "babel-eslint": "^7.2.3",
"babel-plugin-transform-es2015-modules-strip": "^0.1.1", "babel-plugin-transform-es2015-modules-strip": "^0.1.1",
"babel-preset-es2015": "^7.0.0-alpha.7", "babel-preset-es2015": "^6.24.1",
"clean-css-cli": "^4.1.3", "clean-css-cli": "^4.1.3",
"eslint": "^3.19.0", "eslint": "^3.19.0",
"htmllint-cli": "^0.0.6", "htmllint-cli": "^0.0.6",

2
scss/_variables.scss
View File

@ -677,7 +677,7 @@ $card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width})
$card-cap-bg: $gray-lightest !default; $card-cap-bg: $gray-lightest !default;
$card-bg: $white !default; $card-bg: $white !default;
$card-link-hover-color: $white !default; $card-inverse-link-hover-color: $white !default;
$card-img-overlay-padding: 1.25rem !default; $card-img-overlay-padding: 1.25rem !default;

2
scss/mixins/_cards.scss
View File

@ -47,7 +47,7 @@
} }
.card-link { .card-link {
@include hover-focus { @include hover-focus {
color: $card-link-hover-color; color: $card-inverse-link-hover-color;
} }
} }
} }