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

Fix arrow for tooltip and popover

Browse Source
This commit is contained in:
Johann-S 2017-04-08 21:13:15 +02:00
parent b40b1bc396
commit d8996a7e0a
5 changed files with 73 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
js/src/tooltip.js
View File

@ -285,11 +285,8 @@ const Tooltip = (($) => {
this._popper = new Popper(this.element, tip, {
placement : attachment,
arrowElement : '.arrow',
modifiers : {
offset : {
offset : this.config.offset
}
offsets : {
popper : this.config.offset
}
})
@ -632,13 +629,13 @@ const Tooltip = (($) => {
return config
}
_cleanTipClass() {
const $tip = $(this.getTipElement())
const tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX)
if (tabClass !== null && tabClass.length > 0) {
$tip.removeClass(tabClass.join(''))
_cleanTipClass() {
const $tip = $(this.getTipElement())
const tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX)
if (tabClass !== null && tabClass.length > 0) {
$tip.removeClass(tabClass.join(''))
}
}
}
// static

83
js/tests/unit/tooltip.js
View File

@ -364,32 +364,31 @@ $(function () {
})
QUnit.test('should add position class before positioning so that position-specific styles are taken into account', function (assert) {
assert.expect(1)
assert.expect(2)
var done = assert.async()
var styles = '<style>'
+ '.tooltip.right { white-space: nowrap; }'
+ '.tooltip.right .tooltip-inner { max-width: none; }'
+ '.bs-tooltip-right { white-space: nowrap; }'
+ '.bs-tooltip-right .tooltip-inner { max-width: none; }'
+ '</style>'
var $styles = $(styles).appendTo('head')
var $container = $('<div/>').appendTo('#qunit-fixture')
var $target = $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"/>')
$('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"/>')
.appendTo($container)
.bootstrapTooltip({
placement: 'right'
placement: 'right',
trigger: 'manual'
})
.on('inserted.bs.tooltip', function () {
var $tooltip = $($(this).data('bs.tooltip').tip)
assert.ok($tooltip.hasClass('bs-tooltip-right'))
assert.ok($tooltip.attr('style') === undefined)
$(this).bootstrapTooltip('hide')
$container.remove()
$styles.remove()
done()
})
.bootstrapTooltip('show')
var $tooltip = $($target.data('bs.tooltip').tip)
// this is some dumb hack stuff because sub pixels in firefox
var top = Math.round($target.offset().top + $target[0].offsetHeight / 2 - $tooltip[0].offsetHeight / 2)
var top2 = Math.round($tooltip.offset().top)
var topDiff = top - top2
assert.ok(topDiff <= 1 && topDiff >= -1)
$target.bootstrapTooltip('hide')
$container.remove()
$styles.remove()
})
QUnit.test('should use title attribute for tooltip text', function (assert) {
@ -476,6 +475,12 @@ $(function () {
})
.appendTo('#qunit-fixture')
$('#qunit-fixture').css({
position : 'relative',
top : '0px',
left : '0px'
})
var $trigger = $container
.find('a')
.css('margin-top', 200)
@ -489,6 +494,11 @@ $(function () {
setTimeout(function () {
assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) <= Math.round($trigger.offset().top))
$('#qunit-fixture').css({
position : 'absolute',
top : '-10000px',
left : '-10000px'
})
done()
}, 0)
})
@ -629,45 +639,6 @@ $(function () {
$tooltip.trigger('mouseenter')
})
QUnit.test('should correctly position tooltips on SVG elements', function (assert) {
if (!window.SVGElement) {
// Skip IE8 since it doesn't support SVG
assert.expect(0)
return
}
assert.expect(2)
var done = assert.async()
var styles = '<style>'
+ '.tooltip, .tooltip *, .tooltip *:before, .tooltip *:after { box-sizing: border-box; }'
+ '.tooltip { position: absolute; }'
+ '.tooltip .tooltip-inner { width: 24px; height: 24px; font-family: Helvetica; }'
+ '</style>'
var $styles = $(styles).appendTo('head')
$('#qunit-fixture').append(
'<div style="position: fixed; top: 0; left: 0;">'
+ ' <svg width="200" height="200">'
+ ' <circle cx="100" cy="100" r="10" title="m" id="theCircle" />'
+ ' </svg>'
+ '</div>')
var $circle = $('#theCircle')
$circle
.on('shown.bs.tooltip', function () {
var offset = $('.tooltip').offset()
$styles.remove()
assert.ok(Math.abs(offset.left - 88) <= 1, 'tooltip has correct horizontal location')
$circle.bootstrapTooltip('hide')
assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
done()
})
.bootstrapTooltip({ placement: 'top', trigger: 'manual' })
$circle.bootstrapTooltip('show')
})
QUnit.test('should not reload the tooltip on subsequent mouseenter events', function (assert) {
assert.expect(1)
var titleHtml = function () {

3
js/tests/visual/tooltip.html
View File

@ -30,6 +30,9 @@
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
<svg width="30" height="20">
<circle cx="15" cy="10" r="10" fill="#62448F" data-toggle="tooltip" data-placement="top" title="Tooltip on SVG" />
</svg>
</p>
</div>

56
scss/_popover.scss
View File

@ -21,69 +21,66 @@
// Popover directions
&.popover-top,
&.bs-tether-element-attached-bottom {
margin-top: -$popover-arrow-width;
&.bs-popover-top {
margin-bottom: $popover-arrow-width;
&::before,
&::after {
::before,
::after {
left: 50%;
border-bottom-width: 0;
}
&::before {
::before {
bottom: -$popover-arrow-outer-width;
margin-left: -$popover-arrow-outer-width;
border-top-color: $popover-arrow-outer-color;
}
&::after {
::after {
bottom: -($popover-arrow-outer-width - 1);
margin-left: -$popover-arrow-width;
border-top-color: $popover-arrow-color;
}
}
&.popover-right,
&.bs-tether-element-attached-left {
&.bs-popover-right {
margin-left: $popover-arrow-width;
&::before,
&::after {
::before,
::after {
top: 50%;
border-left-width: 0;
}
&::before {
::before {
left: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
border-right-color: $popover-arrow-outer-color;
}
&::after {
::after {
left: -($popover-arrow-outer-width - 1);
margin-top: -($popover-arrow-outer-width - 1);
border-right-color: $popover-arrow-color;
}
}
&.popover-bottom,
&.bs-tether-element-attached-top {
&.bs-popover-bottom {
margin-top: $popover-arrow-width;
&::before,
&::after {
::before,
::after {
left: 50%;
border-top-width: 0;
}
&::before {
::before {
top: -$popover-arrow-outer-width;
margin-left: -$popover-arrow-outer-width;
border-bottom-color: $popover-arrow-outer-color;
}
&::after {
::after {
top: -($popover-arrow-outer-width - 1);
margin-left: -$popover-arrow-width;
border-bottom-color: $popover-arrow-color;
@ -102,23 +99,22 @@
}
}
&.popover-left,
&.bs-tether-element-attached-right {
margin-left: -$popover-arrow-width;
&.bs-popover-left {
margin-right: $popover-arrow-width;
&::before,
&::after {
::before,
::after {
top: 50%;
border-right-width: 0;
}
&::before {
::before {
right: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
border-left-color: $popover-arrow-outer-color;
}
&::after {
::after {
right: -($popover-arrow-outer-width - 1);
margin-top: -($popover-arrow-outer-width - 1);
border-left-color: $popover-arrow-color;
@ -153,8 +149,8 @@
//
// .popover-arrow is outer, .popover-arrow::after is inner
.popover::before,
.popover::after {
.arrow::before,
.arrow::after {
position: absolute;
display: block;
width: 0;
@ -163,11 +159,11 @@
border-style: solid;
}
.popover::before {
.arrow::before {
content: "";
border-width: $popover-arrow-outer-width;
}
.popover::after {
.arrow::after {
content: "";
border-width: $popover-arrow-width;
}

22
scss/_tooltip.scss
View File

@ -13,12 +13,11 @@
&.show { opacity: $tooltip-opacity; }
&.tooltip-top,
&.bs-tether-element-attached-bottom {
&.bs-tooltip-top {
padding: $tooltip-arrow-width 0;
margin-top: -$tooltip-margin;
.tooltip-inner::before {
.arrow::before {
bottom: 0;
left: 50%;
margin-left: -$tooltip-arrow-width;
@ -27,12 +26,11 @@
border-top-color: $tooltip-arrow-color;
}
}
&.tooltip-right,
&.bs-tether-element-attached-left {
&.bs-tooltip-right {
padding: 0 $tooltip-arrow-width;
margin-left: $tooltip-margin;
.tooltip-inner::before {
.arrow::before {
top: 50%;
left: 0;
margin-top: -$tooltip-arrow-width;
@ -41,12 +39,11 @@
border-right-color: $tooltip-arrow-color;
}
}
&.tooltip-bottom,
&.bs-tether-element-attached-top {
&.bs-tooltip-bottom {
padding: $tooltip-arrow-width 0;
margin-top: $tooltip-margin;
.tooltip-inner::before {
.arrow::before {
top: 0;
left: 50%;
margin-left: -$tooltip-arrow-width;
@ -55,12 +52,11 @@
border-bottom-color: $tooltip-arrow-color;
}
}
&.tooltip-left,
&.bs-tether-element-attached-right {
&.bs-tooltip-left {
padding: 0 $tooltip-arrow-width;
margin-left: -$tooltip-margin;
.tooltip-inner::before {
.arrow::before {
top: 50%;
right: 0;
margin-top: -$tooltip-arrow-width;
@ -80,7 +76,7 @@
background-color: $tooltip-bg;
@include border-radius($border-radius);
&::before {
.arrow::before {
position: absolute;
width: 0;
height: 0;