本文介绍了显示弹出窗口/信息提示/工具提示作为悬停特定文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一张图表，http://codepen.io/Siddharth11/pen/LVQmjN
当我将鼠标悬停在上图中右侧写的颜色代码上时，我想显示一个弹出窗口.
我将显示每个颜色代码的单独信息.那么我们如何为每个颜色代码创建单独的弹出窗口.
类似于莫里斯地图:http://codepen.io/andreic/pen/CJoze
或者这个:http://codepen.io/anon/pen/woJMrX
这个问题还没有得到任何正确的回答.我尝试使用一个 jquery 插件(华丽的提示)并试图解决这个问题.但没有运气.我已经重新发布了这个问题并取得了进展.请参考链接对于代码的当前情况:jquery 插件将数据绑定到工具提示(华丽提示)
'use strict';var dataset1 = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];//让颜色 = ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd'];让颜色 = ['#67001f'、'#b2182b'、'#d6604d'、'#f4a582'、'#fddbc7'、'#e0e0e0'、'#bababa'、'#878787'、'#4d4d4d'#1a1a1a', '#1a1a1a', '#1a1a1a'];var 周 = ['一月 - 2016'、'二月'、'三月'、'#fdae61'、'#fee08b'、'#e6f598'、'#abdda4'、'#66c2a5'、'#3288bd'、'#5e4fa2', '#1a1a1a', '#1a1a1a'];var width = document.querySelector('.chart-wrapper').offsetWidth,height = document.querySelector('.chart-wrapper').offsetHeight,minOfWH = Math.min(width, height)/2,初始动画延迟 = 300，弧动画延迟 = 150，arcAnimDur = 3000,secDur = 1000,secIndividualdelay = 150;var 半径 = 未定义；//计算宽度和高度的最小值以设置图表半径如果(minOfWH > 200){半径 = 200;} 别的 {半径 = minOfWH;}//附加 svgvar svg = d3.select('.chart-wrapper').append('svg').attr({宽度":宽度，'高度':高度，'类':'饼图'}).append('g');svg.attr({'transform': 'translate(' + width/2 + ', ' + height/2 + ')'});//用于绘制切片var arc = d3.svg.arc().outerRadius(radius * 0.6).innerRadius(radius * 0.45);//用于标签和折线var externalArc = d3.svg.arc().innerRadius(radius * 0.85).outerRadius(radius * 0.85);//d3 颜色生成器//让 c10 = d3.scale.category10();var pie = d3.layout.pie().value(function(d) {返回d；});var draw = function draw() {svg.append("g").attr("class", "lines");svg.append("g").attr("class", "slices");svg.append("g").attr("class", "labels");//定义切片var slice = svg.select('.slices').datum(dataset1).selectAll('path').data(pie);slice.enter().append('path').attr({'填充':函数填充(d，i){返回颜色[i];},'d':弧，'描边宽度':'25px'}).attr('转换', function(d, i) {返回'旋转(-180, 0, 0)';}).style('opacity', 0).transition().delay(function(d, i) {返回 i * arcAnimDelay + initialAnimDelay;}).duration(arcAnimDur).ease('elastic').style('opacity', 1).attr('transform', 'rotate(0,0,0)');slice.transition().delay(function(d, i) {返回 arcAnimDur + i * secIndividualdelay;}).duration(secDur).attr('stroke-width', '5px');var midAngle = 函数midAngle(d) {返回 d.startAngle + (d.endAngle - d.startAngle)/2;};var text = svg.select(".labels").selectAll("text").data(pie(dataset1));text.enter().append('text').attr('dy', '0.35em').style("opacity", 0).style('fill', function(d, i) {返回颜色[i];}).text(function(d, i) {返回周[i];}).attr('转换', 函数(d) {//计算 'this' 切片的外弧质心var pos = externalArc.centroid(d);//定义文本标签的左右对齐方式pos[0] = 半径 * (midAngle(d) < Math.PI ? 1 : -1);return 'translate(' + pos + ')';}).style('text-anchor', function(d) {返回中角(d) body {溢出:隐藏；字体大小:16px；}.chart-wrapper {宽度:100%；高度:100%；背景色:#0d0d0d；位置:绝对；}小路 {中风:#0d0d0d；/* 笔画宽度:5px;*/光标:指针；-webkit-transition:填充250ms；过渡:填充250ms；}路径:悬停{/* 笔画宽度:10px;*/填充:#fff;}文本 {字体大小:.8em；文本转换:大写；字母间距:.5px；}折线{填充:无；中风:#fff;描边宽度:2px；中风dasharray:5px；}按钮 {位置:相对；顶部:20px；左:820px；文本转换:大写；填充:5px 10px；大纲:无；字体大小:1.2em；背景色:透明；颜色:#fff;边框:1px 实心 #fff;字母间距:1px；-webkit-transition:全部 250 毫秒；过渡:全部 250 毫秒；}按钮:悬停{背景色:#fff;颜色:#0d0d0d；框阴影:0 0 2px #fff;}按钮:活动{不透明度:0.5；}<头><meta charset="UTF-8"><title>疯狂饼图</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"><link rel="stylesheet" href="css/style.css"><身体><div class="chart-wrapper"></div><button onclick='replay()'>每月</button><button type="button">每周</button><script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script><script src="js/index.js"></script>