Correctly selects arrow placement for a tooltip
Fixes #13696. Fixes #13696. Fixes #14197. Closes #13718.
This commit is contained in:
parent
0a4c39dc40
commit
4c98507010
|
@ -836,4 +836,35 @@ $(function () {
|
|||
equal(currentUid, $('#tt-content').text())
|
||||
})
|
||||
|
||||
test('should position arrow correctly when tooltip is moved to not appear offscreen', function () {
|
||||
stop()
|
||||
|
||||
var styles = '<style>'
|
||||
+ '.tooltip, .tooltip *, .tooltip *:before, .tooltip *:after { box-sizing: border-box; }'
|
||||
+ '.tooltip { position: absolute; }'
|
||||
+ '.tooltip-arrow { position: absolute; width: 0; height: 0; }'
|
||||
+ '.tooltip .tooltip-inner { max-width: 200px; padding: 3px 8px; }'
|
||||
+ '</style>'
|
||||
var $styles = $(styles).appendTo('head')
|
||||
|
||||
$('<a href="#" title="tooltip title" style="position: absolute; bottom: 0; right: 0;">Foobar</a>')
|
||||
.appendTo('body')
|
||||
.on('shown.bs.tooltip', function () {
|
||||
var arrowStyles = $(this).data('bs.tooltip').$tip.find('.tooltip-arrow').attr('style')
|
||||
ok(/left/i.test(arrowStyles) && !/top/i.test(arrowStyles), 'arrow positioned correctly')
|
||||
$(this).bootstrapTooltip('hide')
|
||||
})
|
||||
.on('hidden.bs.tooltip', function () {
|
||||
$styles.remove()
|
||||
$(this).remove()
|
||||
start()
|
||||
})
|
||||
.bootstrapTooltip({
|
||||
container: 'body',
|
||||
placement: 'top',
|
||||
trigger: 'manual'
|
||||
})
|
||||
.bootstrapTooltip('show')
|
||||
})
|
||||
|
||||
})
|
||||
|
|
|
@ -261,16 +261,18 @@
|
|||
if (delta.left) offset.left += delta.left
|
||||
else offset.top += delta.top
|
||||
|
||||
var arrowDelta = delta.left ? delta.left * 2 - width + actualWidth : delta.top * 2 - height + actualHeight
|
||||
var arrowPosition = delta.left ? 'left' : 'top'
|
||||
var arrowOffsetPosition = delta.left ? 'offsetWidth' : 'offsetHeight'
|
||||
var isVertical = /top|bottom/.test(placement)
|
||||
var arrowDelta = isVertical ? delta.left * 2 - width + actualWidth : delta.top * 2 - height + actualHeight
|
||||
var arrowOffsetPosition = isVertical ? 'offsetWidth' : 'offsetHeight'
|
||||
|
||||
$tip.offset(offset)
|
||||
this.replaceArrow(arrowDelta, $tip[0][arrowOffsetPosition], arrowPosition)
|
||||
this.replaceArrow(arrowDelta, $tip[0][arrowOffsetPosition], isVertical)
|
||||
}
|
||||
|
||||
Tooltip.prototype.replaceArrow = function (delta, dimension, position) {
|
||||
this.arrow().css(position, delta ? (50 * (1 - delta / dimension) + '%') : '')
|
||||
Tooltip.prototype.replaceArrow = function (delta, dimension, isHorizontal) {
|
||||
this.arrow()
|
||||
.css(isHorizontal ? 'left' : 'top', 50 * (1 - delta / dimension) + '%')
|
||||
.css(isHorizontal ? 'top' : 'left', '')
|
||||
}
|
||||
|
||||
Tooltip.prototype.setContent = function () {
|
||||
|
|
Loading…
Reference in New Issue