在 Bootstrap 4 中重新着色工具提示

Question

我正在尝试在 Bootstrap 4 中重新皮肤/重新格式化工具提示，而原来的做法似乎不再有效。目前我正在这样做：

 .tooltip-inner {
    background: #7abcff;
    background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%);
    background:    -moz-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%);
    background:   linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 );
    color: #fff;
    font-family: 'Roboto', Arial, sans-serif;
}
.tooltip.top .tooltip-arrow {
    border-top-color: #7abcff;
}

.tooltip-inner 工作正常，但 .tooltip.top .tooltip-arrow 不是；它保持黑色。我假设 .tooltip.top 是底部对齐工具提示顶部的箭头。

任何帮助将不胜感激

原文由 Takuhii 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

截至 Bootstrap 4.0

如您所见，用于 工具提示 重新着色的 CSS 由 .tooltip-inner 类处理：

 .tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: .25rem;
}

顶部箭头的 CSS：

 .tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 5px 5px 0;
    border-top-color: #000;
}

向右箭头的CSS：

 .tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
    margin-top: -3px;
    content: "";
    border-width: 5px 5px 5px 0;
    border-right-color: #000;
}

底部箭头的 CSS：

 .tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 0 5px 5px;
    border-bottom-color: #000;
}

左箭头的CSS：

 .tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
    right: 0;
    margin-top: -3px;
    content: "";
    border-width: 5px 0 5px 5px;
    border-left-color: #000;
}

原文由 madison 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

透明使用

.tooltip.show {
  opacity: .9; /* .9 = 90% background-color, 1 = 100% background-color */
}

原文由 Dirk Jüttner 发布，翻译遵循 CC BY-SA 4.0 许可协议