mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-11 16:14:04 +02:00
prevent quick interactions from misplacing tooltips
This commit is contained in:
@@ -283,6 +283,10 @@ class Tooltip extends BaseComponent {
|
|||||||
|
|
||||||
EventHandler.trigger(this._element, this.constructor.Event.INSERTED)
|
EventHandler.trigger(this._element, this.constructor.Event.INSERTED)
|
||||||
|
|
||||||
|
if (this._popper) {
|
||||||
|
this._popper.destroy()
|
||||||
|
}
|
||||||
|
|
||||||
this._popper = Popper.createPopper(this._element, tip, this._getPopperConfig(attachment))
|
this._popper = Popper.createPopper(this._element, tip, this._getPopperConfig(attachment))
|
||||||
|
|
||||||
tip.classList.add(CLASS_NAME_SHOW)
|
tip.classList.add(CLASS_NAME_SHOW)
|
||||||
@@ -650,7 +654,7 @@ class Tooltip extends BaseComponent {
|
|||||||
if (event) {
|
if (event) {
|
||||||
context._activeTrigger[
|
context._activeTrigger[
|
||||||
event.type === 'focusout' ? TRIGGER_FOCUS : TRIGGER_HOVER
|
event.type === 'focusout' ? TRIGGER_FOCUS : TRIGGER_HOVER
|
||||||
] = false
|
] = context._element.contains(event.relatedTarget)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (context._isWithActiveTrigger()) {
|
if (context._isWithActiveTrigger()) {
|
||||||
|
@@ -708,8 +708,9 @@ describe('Tooltip', () => {
|
|||||||
tooltipEl.dispatchEvent(createEvent('mouseover'))
|
tooltipEl.dispatchEvent(createEvent('mouseover'))
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should not hide tooltip if leave event occurs and enter event occurs during hide transition', done => {
|
it('should properly maintain tooltip state if leave event occurs and enter event occurs during hide transition', done => {
|
||||||
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
|
// Style this tooltip to give it plenty of room for popper to do what it wants
|
||||||
|
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip" data-bs-placement="top" style="position:fixed;left:50%;top:50%;">Trigger</a>'
|
||||||
|
|
||||||
const tooltipEl = fixtureEl.querySelector('a')
|
const tooltipEl = fixtureEl.querySelector('a')
|
||||||
const tooltip = new Tooltip(tooltipEl)
|
const tooltip = new Tooltip(tooltipEl)
|
||||||
@@ -721,6 +722,7 @@ describe('Tooltip', () => {
|
|||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
expect(tooltip._popper).not.toBeNull()
|
expect(tooltip._popper).not.toBeNull()
|
||||||
|
expect(tooltip.getTipElement().getAttribute('data-popper-placement')).toBe('top')
|
||||||
tooltipEl.dispatchEvent(createEvent('mouseout'))
|
tooltipEl.dispatchEvent(createEvent('mouseout'))
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -730,6 +732,7 @@ describe('Tooltip', () => {
|
|||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
expect(tooltip._popper).not.toBeNull()
|
expect(tooltip._popper).not.toBeNull()
|
||||||
|
expect(tooltip.getTipElement().getAttribute('data-popper-placement')).toBe('top')
|
||||||
done()
|
done()
|
||||||
}, 200)
|
}, 200)
|
||||||
}, 0)
|
}, 0)
|
||||||
|
Reference in New Issue
Block a user