Bootstrap - 如何定位特定的工具提示？

Question

所以在我的页面上我有几个工具提示，但我希望每个工具提示的颜色都不同。我该怎么做呢？我想通过复杂的 CSS 路线是可能的，但我希望有更简洁的东西。

HTML

<div class="row redbg" data-toggle="tooltip" data-placement="right" title="Lorem ipsum dolor sit amet"></div>    
<div class="row bluebg" data-toggle="tooltip" data-placement="right" title="Lorem ipsum dolor sit amet"></div>

JavaScript

    <script>
    $(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
    </script>

CSS（目前仅适用于红色）

/* TOOL TIP */
.tooltip-inner {
    background-color: red;
    color: #fff;
}

.tooltip.top .tooltip-arrow {
    border-top-color: red;
}

.tooltip.right .tooltip-arrow {
    border-right-color: red;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: red;
}

.tooltip.left .tooltip-arrow {
    border-left-color: red;
}
.tooltip-inner {
    max-width: 350px;
    /* If max-width does not work, try using width instead */
    width: 350px; 
    height:75px;

那么我如何使具有

redbg

类的div显示红色工具提示，以及如何使具有

bluebg

类的div显示蓝色工具提示？

谢谢

Answer 1

.redbg + .tooltip > .tooltip-inner {
    background-color: red;
    color: #fff;
}

.bluebg + .tooltip > .tooltip-inner {
    background-color: blue;
    color: #fff;
}

我认为这可以实现你所寻求的。

Answer 2

Bootstrap 4 测试：

您可以在链接上添加 data-custom-class 属性，并在 css 中使用该类来更新工具提示。

HTML：

<a href="#" class="chatbox-chat-icon chattoggler" data-toggle="tooltip" data-placement="right" data-custom-class="chat-tooltip" title="ChatGPT Icon">
      ChatGPT
    </a>

CSS：

.chat-tooltip .tooltip-inner {
  background-color: green;
}