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

我认为这可以实现您的目标。

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

1 个答案: