Question

我从另一篇文章中获取了此代码，但是对我来说不起作用。工具提示（包括箭头）应为蓝色，但仍保持黑色。

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip()
});

.tooltip-primary + .tooltip > .tooltip-inner { background-color: blue; }
.tooltip-primary + .tooltip > .tooltip-arrow { border-bottom-color: blue; }

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    
 
<a href="#" data-toggle="tooltip" data-placement="bottom"
       title="Tooltip on bottom"
       class="tooltip-primary">Tooltip on bottom</a>

Answer 1

问题出在您的+选择器中-请记住，这是相邻同级组合器，这意味着目标需要立即出现在您的元素之后正在引用。 Bootstrap工具提示不是这种情况。它被注入到DOM的底部。

在此示例中，它仍然是兄弟姐妹，因此您可以使用 general sibling combinator (~) 定位，只需将+替换为~（波浪号）即可：

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip()
});

.tooltip-primary~.tooltip>.tooltip-inner {
  background-color: blue;
}

.tooltip-primary~.tooltip>.tooltip-arrow {
  border-bottom-color: blue;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">


<a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" class="tooltip-primary">Tooltip on bottom</a>

但是，请注意，如果锚点不在根级别（很有可能），那么您将不能使用CSS定位工具提示，因为没有“ CSS中的父选择器。

Answer 2

锚点不在根级别时的解决方案

如果您的锚点不在根目录上，那么我发现可行的唯一方法是使用insert.bs.tooltip事件，并向内部div和箭头添加一个类。然后，您可以在CSS中定位该类。

@classmethod
def some_method(cls, a, b):
    ...

// initialize tooltips
$('[data-toggle="tooltip"]').tooltip(); 

// Add the classes to the toolip when it is created
$('[data-toggle="tooltip"]').on('inserted.bs.tooltip',function () {
    var thisClass = $(this).attr("class");
    $('.tooltip-inner').addClass(thisClass);
    $('.arrow').addClass(thisClass + "-arrow");
});

/* style the tooltip box and arrow based on your class*/
.bs-tooltip-left .redTip {
    background-color: red !important
}
.bs-tooltip-left .redTip-arrow::before {
    border-left-color: red !important
}

更改Bootstrap工具提示的颜色

2 个答案: