ngx-bootstrap的tooltip组件containerClass不生效，自定义样式无法应用如何解决？

解决方法 #

• 调整样式存放位置
  你设置了container='body'后，tooltip元素会直接渲染到<body>根节点下，不属于当前组件的DOM子树。Angular默认开启视图封装，会给组件内的样式添加唯一属性前缀，所以组件内定义的.tooltipClass无法匹配到全局的tooltip元素。把.tooltipClass的样式代码移动到项目全局样式文件（通常是src/styles.css/src/styles.scss）即可生效。
• 校验属性写法
  ngx-bootstrap tooltip的自定义容器类属性为驼峰命名的containerClass，注意不要写成全小写的containerclass，静态类名直接写containerClass="tooltipClass"即可，动态类名可以用属性绑定写法：[containerClass]="'tooltipClass'"。
• 提升z-index优先级
  如果确认类已经成功添加到tooltip元素上，但z-index还是不生效，可以把z-index值调整到远大于rowNo元素的z-index值，若仍被其他样式覆盖，可添加!important强制生效：

.tooltipClass{
  z-index: 9999 !important;
  color: green;
}

• 调整container配置
  如果不想把样式放到全局，也可以删除container='body'配置，让tooltip默认渲染到触发元素的父节点内，此时组件内定义的样式就能匹配到tooltip元素，要注意父元素如果设置了overflow: hidden可能会导致tooltip被截断。

内容的提问来源于stack exchange，提问作者Tanishka Bansal