如何在JavaScript懸停內創建一個顏色鍵？

我有一個網站的動態部分，如果有值，則顯示一個表，如果沒有值，則隱藏該表。當它顯示錶格時，表格中的值以不同的顏色表示不同的定義。我希望能夠使用這些定義的顏色鍵添加懸停文本。最初，我想要一個懸停的顏色旁邊的定義有一個小平方米的顏色。我認爲這樣做可能太困難了，因此我試圖改變定義的實際顏色以顯示值/顏色/定義之間的關聯。然而......我甚至都不知道該怎麼做。我需要的懸停鼠標懸停發生，所以現在我有這個，直到我弄清楚如何獲得顏色/更改懸停段彩色文本：如何在JavaScript懸停內創建一個顏色鍵？

$myResults.find('.Solutions').bind("mouseover", function(){ 
$(".myTable").attr('title', 'blue - value1 \n red - value2 \n olive - value3 \n'); 
});

我嘗試使用tooltipster，無法獲取上班。

來源

2014-09-24 user2847749

你不能做一個HTML title屬性的格式。您將需要某種工具提示庫。 – dave 2014-09-24 15:27:03

@dave OP的代碼實際上在較老的IE中工作。 – Teemu 2014-09-24 15:28:16

可能重複[如何更改錨標記內的Title屬性的樣式？]（http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside- the-anchor-tag） – dave 2014-09-24 15:29:37

如果要將HTML/CSS放在工具提示中，您必須使用類似tooltipster,jQuery UI,Kendo UI或其他多種選項的庫。

下面是一個使用tooltipster一個例子：

$(document).ready(function() { 
 
\t $('.myTable').tooltipster({ 
 
\t \t content: $('<div class="tip blue">Blue</div><div class="tip red">Red</div><div class="tip olive">Olive</div>') 
 
\t }); 
 
});

.myTable { 
 
    height:20px; 
 
    width:200px; 
 
    background-color: #CCC; 
 
    text-align:center; 
 
} 
 

 
.tip { 
 
    height:50px; 
 
    width:50px; 
 
    float:left; 
 
    text-align:center; 
 
} 
 

 
.blue { 
 
    background-color: #00F; 
 
} 
 

 
.red { 
 
    background-color: #F00; 
 
} 
 

 
.olive { 
 
    background-color: #808000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/themes/tooltipster-light.min.css" rel="stylesheet"/> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/js/jquery.tooltipster.min.js"></script> 
 

 
<div class="myTable">Hover Over Me</div>

來源

2014-09-24 17:43:52 dave

謝謝@dave。這看起來像我正在嘗試/我需要什麼。我目前有jquery v1.7.1，因爲這是我們的項目運行。我添加了jquery.tooltipster.min.js，tooltipster.css和tooltipster-light.css。然而，當我試圖運行它時，我得到了「Uncaught TypeError：undefined不是一個函數」在「$（'。myTable'）。tooltipster（{」line。any ideas ?? – user2847749 2014-09-24 18:26:43

OMG。它已經這麼長了。我忘了我需要在我的index.html文件中添加腳本和鏈接行，我做到了，它顯示出來了!!!它需要一些CSS工作......但是謝謝！ – user2847749 2014-09-24 18:46:26

如何在JavaScript懸停內創建一個顏色鍵？

回答

相關問題