Question

我的文档中有一段我希望在其中包含一些代码。我希望此代码使用javascript更新号码（此部分已解决），并让它不断更新工具提示。此工具提示还需要其中的颜色为白色和红色（这没有解决，我无法弄清楚如何在工具提示中使用多种颜色），而不是仅使用CSS更改其颜色。我的代码是

<p data-placement="bottom" data-toggle="tooltip" title="<p style = 'color:red'>Fo<span style = 'color:white'>o</span></p>">Test</p>

然而所有出现的都是

<p style = 'color:red'>Fo<span style = 'color:white'>o</span></p>

而不是红色和白色foo的想要结果。作为回顾，我需要一个更新标题元素，可以是两种不同的颜色，并且可以使用javascript更新您可以看到我的代码here。

Answer 1

您解决此问题的方法不正确。您无法修改浏览器显示标题的时间段。此外，title属性（或任何属性）的值不会被解析为HTML，因此包含一个与其相关联的样式的段落元素将不会被解析（因为您已经找到）

相反，您应该创建一个包含要显示的文本的span元素，并根据需要设置样式的样式。最初应该隐藏跨度，并且在主段落鼠标悬停时，可以显示跨度。跨度应该将其位置设置为绝对，因此可以相对于代码中的父位置放置（这将位于主段落旁边）。

JavaScript需要包含鼠标悬停和鼠标移动的事件处理程序：

var title = document.getElementById("paragraphTitle");
var para = document.getElementById("par");

para.addEventListener("mouseover", function(){
    title.style.display = "inline";
});

para.addEventListener("mouseout", function(){
    title.style.display = "none";
});

请参阅此小提琴以获取示例：https://jsfiddle.net/5vysr3ku/24/

更改工具提示的颜色

1 个答案: