如何更改 3 个不同工具提示箭头的颜色

Question

我通过这样的数据切换使 3 个工具提示与 js 具有不同的颜色

<span class="tooltipjs" data-toggle="sin-datos" data-placement="right" data-original-title="some text">A</span>

$('[data-toggle="sin-datos"]').hover(function(){
      $('.tooltip-inner').css('background-color', 'blue');
      $('.tooltip-inner').css('color', 'white');
      $('.tooltip-arrow').css('border-right-color', 'blue');
      
  });

在这个原型中工作正常，箭头与工具提示背景jsfiddle 原型的颜色相匹配（出于测试目的，我以三种不同的方式设置了“border-right-color”）。

但是当我把它放在我的 web 应用程序不起作用时。

我可以使用以下方法设置所有箭头颜色：

.tooltip .arrow::before {
      border-right-color: green;
}

就像我在图片中所做的那样，但我不能像使用工具提示的背景颜色那样通过不同的数据切换来改变颜色。

我搜索并发现问题可能是颜色设置在伪元素（::before）内，我无法使用 js 访问，我从不使用伪元素，所以我有点迷茫。

我已经尝试这样设置它......

$('.tooltip-arrow').css('border-right-color', 'color');
$('.tooltip > .tooltip-arrow').css('border-right-color', 'color');
$('.tooltip .tooltip-arrow').css('border-right-color', 'color');
$('.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before').css('border-right-color', 'color');
$('.tooltip .arrow::before').css('border-right-color', 'color');

但没有任何效果，我使用 bootstrap 4。

Answer 1

这可能是一个问题，因为箭头现在是使用伪元素生成的（您不能将内联 styles 应用于这些，请检查下面的 3 选项）。 我有几个选择：

• 用适当的 styles 和 append 制作一个 css class 和 append 到主容器的样式。 对于这个，您可以定义一个data-tooltip-class属性，以制作通用 function 为 hover 上的标记应用正确的颜色
• 定义 自己的模板，使用自己的箭头渲染技巧（可能使用非伪元素）
• 使用此处的选项之一