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

Tooltip background color is transparent for long text. #101

Closed
scottwernervt opened this issue Dec 5, 2017 · 4 comments
Closed

Tooltip background color is transparent for long text. #101

scottwernervt opened this issue Dec 5, 2017 · 4 comments

Comments

@scottwernervt
Copy link
Contributor

@scottwernervt scottwernervt commented Dec 5, 2017

Bug

  1. Go to https://kybishop.github.io/ember-attacher/
  2. Using developer tools, set tooltip text from Hello World! to Random long wrapped text. Random long wrapped text. Random long wrapped text. Random long wrapped text. Random long wrapped text. Random long wrapped text. Random long wrapped text. Random long wrapped text. Random long wrapped text. Random long wrapped text. Random long wrapped text. Random long wrapped text.
  3. Activate tooltip -> Tooltip background color is transparent when the tooltip's text is long.

bug-screenshot

Workaround

Remove background-color: transparent.

&.ember-attacher-fill {
    overflow: hidden;
    // background-color: transparent;
}

Is there a reason why ember-attacher-fill class has a transparent background color?

@kybishop

This comment has been minimized.

Copy link
Owner

@kybishop kybishop commented Dec 5, 2017

@scottwernervt the transparent background powers the fill animation. There is an expanding circle within tooltips that use the fill animation which "fills" the tooltip with an opaque background.

We should look into tippy.js to see if they've found a way around the borked corners on tooltips using fill. The initial animations were based off that library, and they might've updated things by now.

@kybishop

This comment has been minimized.

Copy link
Owner

@kybishop kybishop commented Dec 5, 2017

Looks like this is a long-standing bug/wontfix in tippy.js: atomiks/tippyjs#98

The current workaround is to either implement a custom animation tailored to larger tooltips, or to just use one of the other animations for larger tooltips.

I'm happy to accept a PR which can determine the animation circle's size dynamically, or perhaps just a custom fill animation for larger tooltips (fillLarge?).

@scottwernervt

This comment has been minimized.

Copy link
Contributor Author

@scottwernervt scottwernervt commented Dec 5, 2017

You are correct, only occurs with animation="fill". Found another similar issue Tippy layer background's height is not full displayed with html template and the solution is not to use fill for > 4 lines long.

I will see if I can implement a PR for animation the circle size dynamically or add a custom fill animation.

@scottwernervt

This comment has been minimized.

Copy link
Contributor Author

@scottwernervt scottwernervt commented Jun 2, 2018

I don't feel the need to implement logic to handle this case since there are clear work arounds.

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