更改工具提示的顏色

我在文檔中有一段內容，我想在其中添加一些代碼。我希望此代碼使用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。

來源

2016-03-06 TheGenie OfTruth

如果你** **了去把'<'內的屬性值，正如其他人指出的那樣，將不會按照您的想法執行，爲了符合您的需要，您需要將其轉義爲'<'。 – 2016-03-07 04:03:45

您對此問題的處理方法不正確。您無法修改瀏覽器顯示標題，句號的方式。此外，title屬性（或任何屬性）的值不會被解析爲HTML，所以包含一個連接到它的樣式的段落元素將不會被解析（就像您發現的那樣）。

相反，您應該使用您希望顯示的文本創建一個span元素，並根據需要設置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/

來源

2016-03-07 03:16:38

更改工具提示的顏色

回答

相關問題