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

我让3个工具提示与js的数据切换颜色不同，如下所示

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

在这个原型中效果很好，箭头与工具提示背景的颜色匹配（出于测试目的，我用三种不同的方式设置了“右边框颜色”）

但当我把它放进我的网络应用程序时，它就不起作用了

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

.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');

---

但是什么都不起作用，我使用引导4。

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

• 使用适当的样式创建一个css类，并将其附加到主容器（设置内部和箭头的样式）。对于这个，您可以定义一个

  数据工具提示类

  属性，以生成一个通用函数，为悬停时的标记应用正确的颜色
• 使用自己的箭头渲染技巧（可能使用非伪元素）定义
• 使用中的一个选项

---

对于您的最后一个代码片段，您是否在

悬停事件中应用了它们？是的。也许我没有解释清楚。我想说的是，尝试更改箭头的颜色，将代码放在第一个代码段中的“$（'.tooltiparrow'）.css（'border-right-color'，'blue'）；”的位置。我尝试了所有的选择，但没有一个有效。当我开始这样做的时候，我会做出这样的事情。创建一个css类并定义每个工具提示，但尽管它在原型中也可以工作，但在我的应用程序中却不起作用，我得出结论，这是因为层次结构，或者可能与伪元素存在相同的问题。我将尝试其他选项！非常感谢您的时间最后我使用了第二个选项，我删除了“：：before”和
.tooltip.arrow:：before{content:none；}
并创建了我自己的箭头
。arrow{width:0；height:0；border top:10px实心透明；border bottom:10px实心透明；border right:10px实心蓝色；}
非常感谢！
$('.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');