如何为ngx-bootstrap/tooltip添加自定义样式？修改箭头填充色与边框

当然可行！你可以通过自定义CSS样式来实现tooltip箭头的白色填充效果并添加边框，具体操作如下：

实现步骤 #

• 找到Angular Material tooltip箭头对应的CSS选择器，核心是.mat-tooltip-arrow元素及其伪元素::before
• 通过调整这两个元素的border-color属性，分别实现箭头的边框和白色填充：

/* 设置tooltip箭头的边框颜色 */
.mat-tooltip-arrow {
  border-top-color: #999 !important; /* 替换成你想要的边框颜色 */
  border-right-color: #999 !important;
}

/* 设置tooltip箭头的内部填充为白色 */
.mat-tooltip-arrow::before {
  border-top-color: #fff !important;
  border-right-color: #fff !important;
}

注意事项 #

• 如果样式没有生效，建议把这段CSS放在全局样式文件（比如styles.css）中，确保它的优先级高于Angular Material的默认样式
• 可以根据自己的需求调整边框颜色的取值，比如换成#ddd或者其他你喜欢的颜色

这样就能让tooltip箭头变成白色填充带边框的效果啦！

内容的提问来源于stack exchange，提问作者Reddy Bhavani Prasad