Skip to content

Commit

Permalink
prevent quick interactions from misplacing tooltips
Browse files Browse the repository at this point in the history
  • Loading branch information
RyanBerliner authored and XhmikosR committed Mar 16, 2021
1 parent 7bf66f5 commit 70a68f0
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 3 deletions.
6 changes: 5 additions & 1 deletion js/src/tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,10 @@ class Tooltip extends BaseComponent {

EventHandler.trigger(this._element, this.constructor.Event.INSERTED)

if (this._popper) {
this._popper.destroy()
}

this._popper = Popper.createPopper(this._element, tip, this._getPopperConfig(attachment))

tip.classList.add(CLASS_NAME_SHOW)
Expand Down Expand Up @@ -650,7 +654,7 @@ class Tooltip extends BaseComponent {
if (event) {
context._activeTrigger[
event.type === 'focusout' ? TRIGGER_FOCUS : TRIGGER_HOVER
] = false
] = context._element.contains(event.relatedTarget)
}

if (context._isWithActiveTrigger()) {
Expand Down
7 changes: 5 additions & 2 deletions js/tests/unit/tooltip.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -708,8 +708,9 @@ describe('Tooltip', () => {
tooltipEl.dispatchEvent(createEvent('mouseover'))
})

it('should not hide tooltip if leave event occurs and enter event occurs during hide transition', done => {
fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
it('should properly maintain tooltip state if leave event occurs and enter event occurs during hide transition', done => {
// 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 tooltip = new Tooltip(tooltipEl)
Expand All @@ -721,6 +722,7 @@ describe('Tooltip', () => {

setTimeout(() => {
expect(tooltip._popper).not.toBeNull()
expect(tooltip.getTipElement().getAttribute('data-popper-placement')).toBe('top')
tooltipEl.dispatchEvent(createEvent('mouseout'))

setTimeout(() => {
Expand All @@ -730,6 +732,7 @@ describe('Tooltip', () => {

setTimeout(() => {
expect(tooltip._popper).not.toBeNull()
expect(tooltip.getTipElement().getAttribute('data-popper-placement')).toBe('top')
done()
}, 200)
}, 0)
Expand Down

0 comments on commit 70a68f0

Please sign in to comment.