如何在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悬停内创建一个颜色键？

回答

相关问题