Tooltip background color is transparent for long text.

[scottwernervt]

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.

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]

@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]

Looks like this is a long-standing bug/wontfix in tippy.js: https://github.com/atomiks/tippyjs/issues/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]

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]

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