Popper is not always first, hides behind other element

Hello. My implementation of ngx-popper doesn’t always put the popper as the front html element.

My markup: <a *ngIf="fieldValue.field.description?.length > 0" [popper]="fieldValue.field.description" [popperTrigger]="'hover'" [popperPlacement]="'auto-top'" href="javascript:void(0)" class="tooltip-icon text-left" > <sup> <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> </sup> </a>

I have a custom css hook for the container element aswell. Maybe this is causing the issue?

.ngxp__container { text-align: left; opacity: 1 !important; background-color: #656d79; text-align: left; padding: 15px !important; max-width: 300px; font-size: 12px; line-height: 20px; border-radius: 5px !important; color: white; border: 1px solid #656d79 !important; border-bottom: 3px solid #434a54 !important; }

How can I fix this?

[frikkfossan]

That worked great! added these styles: .ngxp__container { … position: relative; z-index: 999; }

z-index = 999 to be sure that 99% of all times it should render on top of all other elements.

[MrFrankel]

Have you tried giving the container position: relative and a higher z-index?