如何更改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 prototype的颜色匹配（出于测试目的，我以三种不同方式设置了“ border-right-color”）。

但是当我将其放入我的Web应用程序时不起作用。

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

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

就像我在“ thay图片”中所做的一样，但是我无法像我使用工具提示的背景色那样通过不同的数据切换来更改颜色。

我搜索发现问题可能在于颜色设置在伪元素（:: 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');

但是无效，即时启动程序4。

Answer 1

这可能是一个问题，即箭头现在是由伪元素生成的（您不能将内联样式应用于这些样式，请在下面的3选项中进行选择）。我为您提供了一些选择：

• 使用适当的样式制作一个CSS类，并将其附加到主容器中（对内部和箭头进行样式化）。为此，您可以定义一个data-tooltip-class属性，以创建一个通用功能，为悬停时的标记应用正确的颜色
• 使用自己的箭头渲染技巧（也许使用非伪元素）定义own template
• 使用here
中的一个选项