因此,在我的网页上,我有几个工具提示,但我想每个人的颜色是不同的。我该怎么做呢?我想这将是可能的,通过一个复杂的路线的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如何显示蓝色工具提示呢?
谢谢
2条答案
按热度按时间3pmvbmvn1#
我认为这可以实现你正在寻找的东西。
91zkwejq2#
Bootstrap 4测试:
你可以在链接上添加data-custom-class属性,并在css中使用这个类来更新你的工具提示。
超文本标记语言:
CSS: