Tooltip arrows misaligned if ViewEncapsulation.None is set globally.

[bfbares]

Bug description:

Tooltip arrows misaligned if ViewEncapsulation.None is set globally.

Link to minimally-working plunker that reproduces the issue:

http://plnkr.co/edit/cAtUk1W8m9emOlZHBkwZ?p=preview

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 4.0.3

ng-bootstrap: 1.0.0-beta.5

Bootstrap: 4.0.0-beta

[mschoudry]

Hi,
Component level styles are used in ngbootstrap by some components(tooltip, popover, datepicker, timepicker), therefore ngbootsrap is dependent on default ViewEncapsulation i.e. Emulated, to work properly. If ViewEncapsulation is changed then these components will not work properly.

encapsulation can be applied at each component level of ngbootstrap to avoid such issue, so that it should not have any impact from the parent ViewEncapsulation.

@pkozlowski-opensource @maxokorokov comments please?

Regards,

[Adondriel]

In the plunkr, I messed around with the class.

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
    /* margin-left: -3px; */
    content: "";
    border-width: 5px 5px 0;
    border-top-color: #000;
}

Fixes it, but this also creates an issue with the border-radius on the actual tooltip itself, so you also have to fix that, using this CSS:

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    background-color: #000;
    /* border-radius: .25rem; */

This produces: