javascript - 如何在 javascript 悬停中创建颜色键？

Question

我的网站有一个动态部分，如果有值则显示表格，如果没有值则隐藏表格。当它显示表格时，表格中的值以不同的颜色显示，代表不同的定义。我希望能够为这些定义添加带有颜色键的悬停文本。最初，我希望悬停具有该颜色的小方 block ，并在颜色旁边显示定义。环顾四周后，我认为这可能太难了，所以我只是尝试更改定义的实际颜色以显示 value/color/definition 之间的链接。但是......我什至不知道该怎么做。我需要在鼠标悬停时发生悬停，所以现在我有了这个，直到我弄清楚如何获取颜色/更改悬停段落中的颜色文本:

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

我尝试使用 tooltipster 但无法正常工作。

Answer 1

如果你想将 HTML/CSS 放入工具提示中，你必须使用类似 tooltipster 的库, jQuery UI , Kendo UI ，或大量其他选项。

这是一个使用工具提示的例子:

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

.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>