bootstrap tooltip白底黑字

### 修改 Bootstrap Tooltip 的样式

为了实现 Bootstrap Tooltip 白色背景黑色文字的效果，可以通过覆盖默认的 CSS 样式来完成。具体来说，在项目的自定义 CSS 文件中添加如下代码：

.tooltip-inner {
    background-color: #ffffff !important;
    color: #000000 !important;
}

这段代码会改变 `tooltip` 提示框内部的文字颜色以及背景颜色[^1]。

为了让箭头也适应新的配色方案，还需要调整 `.tooltip-arrow` 类的相关属性：

.tooltip-arrow::before,
.tooltip-arrow::after {
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: #ffffff !important;
    border-left-color: transparent !important;
}

上述设置确保了当提示框显示时其指向的小三角形能够匹配整体风格[^4]。

最后，如果希望进一步优化用户体验，比如控制透明度或增加边框等细节，则可以根据需求继续扩展这些规则。例如使整个 tooltip 更加明显可见:

.tooltip {
    opacity: 1 !important;
}

通过这种方式即可轻松定制符合项目视觉设计要求的 Tooltips 组件[^3]。