ngx-bootstrap tooltip container class is not working

Question

I am using tooltip from ngx-bootstrap with this code

<button tooltip="Add column before" container='body' placement='bottom' containerClass='tooltipClass'> 
    <i class="plus"></i>
</button>

and code for tooltipClass is

.tooltipClass{
  z-index:100;
  color:green
}

The tooltip is beneath the row Numbers and that is because of the z-index on rowNo. but I am adding greater z-index to the tooltip but the class is not getting added to it. Any ideas what should I do?

Answer 1

I was hitting this same issue, but the solutions above weren't working. Updating the global scss variables of ngx-bootstrap was how I fixed it.

This updates your inner tooltip.

.tooltip-inner {
  background-color: #333 !important;
  color: green !important;
}

This updates your arrow depending on position.

.bs-tooltip-bottom .arrow::before{
  border-bottom-color: #333;
}