Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<b-popover>'s configured with Slots break when quickly re-hovering #1990

Closed
ericdrobinson opened this issue Aug 8, 2018 · 4 comments · Fixed by #3908 · May be fixed by thislooksfun/earthdawn#37

Comments

@ericdrobinson
Copy link

commented Aug 8, 2018

The Problem

Popovers configured with slots (Title, Content, or both) can visually "break" (render incorrectly) when a user un-hovers and then quickly re-hovers an element before the fadeout animation completes.

See:
brokenpopovers

This can be mitigated by setting the no-fade option to true.

Steps to Reproduce

  1. Position the mouse over an element configured with a popover, triggering the fade in.
  2. Move the mouse off of the icon, triggering the fade out.
  3. Quickly relocate the mouse over the popover information icon (before the fadeout animation completes).

The Environment

  • Operating Systems: Windows 10, macOS 10.13.6
  • Browsers: Chrome 68, Safari 11
  • Bootstrap-Vue: v2.0.0-rc.11
  • Reduced Test Case: See this JsFiddle.
@tmorehouse

This comment has been minimized.

Copy link
Member

commented Nov 5, 2018

Thus is a side effect of having to move the Vue VNodes from one location to another (while keeping Vue happy, as technically moving nodes from a component to another place in the document is not supported in Vue).

@jackmu95 jackmu95 removed the Version: 2.x label Apr 2, 2019

@jackmu95 jackmu95 changed the title Popovers configured with Slots break when quickly re-hovering <b-popover>'s configured with Slots break when quickly re-hovering Apr 9, 2019

@tmorehouse tmorehouse added this to To Do in 2.0.0 Stable May 25, 2019

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Jul 9, 2019

One workaround is to add a delay value (say 50-100ms) to delay the opening/closing of the tooltip/popover.

It is also possible to specify a different value for the show delay vs the hide delay.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Aug 24, 2019

PR #3908 should have this fixed (once it is completed and merged into 2.0.0 stable branch)

@tmorehouse tmorehouse moved this from To Do to In Progress in 2.0.0 Stable Aug 28, 2019

2.0.0 Stable automation moved this from In Progress to Completed Aug 28, 2019

tmorehouse added a commit that referenced this issue Aug 28, 2019
@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 7, 2019

BootstrapVue v2.0.0 stable has been released. See https://bootstrap-vue.js.org/docs/misc/changelog

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
3 participants
You can’t perform that action at this time.