Merge branch 'v4-dev' into v4-docs-streamlined
This commit is contained in:
Mark Otto
commit
332d882cdb
|
|
@ -51,7 +51,7 @@ Four options are available: top, right, bottom, and left aligned.
|
|||
|
||||
<div class="bd-example bd-example-popover-static">
|
||||
<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>
|
||||
<div class="popover-content">
|
||||
<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 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>
|
||||
<div class="popover-content">
|
||||
<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 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>
|
||||
<div class="popover-content">
|
||||
<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 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>
|
||||
<div class="popover-content">
|
||||
<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>
|
||||
<td>template</td>
|
||||
<td>string</td>
|
||||
<td><code>'<div class="popover" role="tooltip"><div class="arrow" x-arrow></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'</code></td>
|
||||
<td><code>'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'</code></td>
|
||||
<td>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -46,25 +46,25 @@ Four options are available: top, right, bottom, and left aligned.
|
|||
|
||||
<div class="bd-example bd-example-tooltip-static">
|
||||
<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">
|
||||
Tooltip on the top
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
Tooltip on the right
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
Tooltip on the bottom
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
Tooltip on the left
|
||||
</div>
|
||||
|
|
@ -134,7 +134,7 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
|
|||
|
||||
<!-- Generated markup by the plugin -->
|
||||
<div class="tooltip bs-tooltip-top" role="tooltip">
|
||||
<div class="arrow" x-arrow></div>
|
||||
<div class="arrow"></div>
|
||||
<div class="tooltip-inner">
|
||||
Some tooltip text!
|
||||
</div>
|
||||
|
|
@ -207,7 +207,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
|||
<tr>
|
||||
<td>template</td>
|
||||
<td>string</td>
|
||||
<td><code>'<div class="tooltip" role="tooltip"><div class="arrow" x-arrow></div><div class="tooltip-inner"></div></div>'</code></td>
|
||||
<td><code>'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'</code></td>
|
||||
<td>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const Popover = (($) => {
|
|||
trigger : 'click',
|
||||
content : '',
|
||||
template : '<div class="popover" role="tooltip">'
|
||||
+ '<div class="arrow" x-arrow></div>'
|
||||
+ '<div class="arrow"></div>'
|
||||
+ '<h3 class="popover-title"></h3>'
|
||||
+ '<div class="popover-content"></div></div>'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ const Tooltip = (($) => {
|
|||
const Default = {
|
||||
animation : true,
|
||||
template : '<div class="tooltip" role="tooltip">'
|
||||
+ '<div class="arrow" x-arrow></div>'
|
||||
+ '<div class="arrow"></div>'
|
||||
+ '<div class="tooltip-inner"></div></div>',
|
||||
trigger : 'hover focus',
|
||||
title : '',
|
||||
|
|
@ -99,7 +99,8 @@ const Tooltip = (($) => {
|
|||
|
||||
const Selector = {
|
||||
TOOLTIP : '.tooltip',
|
||||
TOOLTIP_INNER : '.tooltip-inner'
|
||||
TOOLTIP_INNER : '.tooltip-inner',
|
||||
ARROW : '.arrow'
|
||||
}
|
||||
|
||||
const Trigger = {
|
||||
|
|
@ -288,16 +289,19 @@ const Tooltip = (($) => {
|
|||
$(this.element).trigger(this.constructor.Event.INSERTED)
|
||||
|
||||
this._popper = new Popper(this.element, tip, {
|
||||
placement : attachment,
|
||||
modifiers : {
|
||||
offset : {
|
||||
offset : this.config.offset
|
||||
placement: attachment,
|
||||
modifiers: {
|
||||
offset: {
|
||||
offset: this.config.offset
|
||||
},
|
||||
flip : {
|
||||
behavior : this.config.fallbackPlacement
|
||||
flip: {
|
||||
behavior: this.config.fallbackPlacement
|
||||
},
|
||||
arrow: {
|
||||
element: Selector.ARROW
|
||||
}
|
||||
},
|
||||
onCreate : (data) => {
|
||||
onCreate: (data) => {
|
||||
if (data.originalPlacement !== data.placement) {
|
||||
this._handlePopperPlacementChange(data)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@
|
|||
"babel-cli": "^6.24.1",
|
||||
"babel-eslint": "^7.2.3",
|
||||
"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",
|
||||
"eslint": "^3.19.0",
|
||||
"htmllint-cli": "^0.0.6",
|
||||
|
|
|
|||
|
|
@ -677,7 +677,7 @@ $card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width})
|
|||
$card-cap-bg: $gray-lightest !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;
|
||||
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
}
|
||||
.card-link {
|
||||
@include hover-focus {
|
||||
color: $card-link-hover-color;
|
||||
color: $card-inverse-link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue