Bootstrap -如何针对特定的工具提示?

xe55xuns  于 2023-09-28  发布在  Bootstrap
关注(0)|答案(2)|浏览(117)

因此,在我的网页上,我有几个工具提示,但我想每个人的颜色是不同的。我该怎么做呢?我想这将是可能的,通过一个复杂的路线的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如何显示蓝色工具提示呢?
谢谢

3pmvbmvn

3pmvbmvn1#

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

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

我认为这可以实现你正在寻找的东西。

91zkwejq

91zkwejq2#

Bootstrap 4测试:
你可以在链接上添加data-custom-class属性,并在css中使用这个类来更新你的工具提示。
超文本标记语言:

<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;
}

相关问题