Blurry text in tooltip (ngx-bootstrap)

Question

When using ngx-bootstrap, if I create a tooltip with a lot of text, the text has a slight blur.

If I inspect the element, the transform translate 3d is what seems to cause the blur. If I turn that off, then the text sharpens...but then the tooltip positioning is lost.

element.style {
    will-change: transform;
    top: 0px;
    left: 0px;
    transform: translate3d(119px, -34px, 0px);
}

Is there a way to sharpen the text?

I tried the following, but it did not help:

.tooltip {
    -webkit-font-smoothing: subpixel-antialiased;
}

Below are sample images of tooltip with translate3d (blurry) and without (crisp).

https://stackblitz.com/edit/angular-2cmbj3

Answer 1

https://stackblitz.com/edit/angular-2cmbj3-fnhz18?file=app/basic.html

Use

.tooltip.show {
    opacity: 1 !important;
}