显示弹出窗口/信息提示/工具提示作为悬停特定文本 [英] display popup/infotip/tooltip as hover a particular text
本文介绍了显示弹出窗口/信息提示/工具提示作为悬停特定文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一张图表，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) <数学.PI ?开始":结束"；}).transition().delay(function(d, i) {返回 arcAnimDur + i * secIndividualdelay;}).duration(secDur).style('opacity', 1);var polyline = svg.select(".lines").selectAll("polyline").data(pie(dataset1));polyline.enter().append("polyline").style("opacity", 0.5).attr('points', function(d) {var pos = externalArc.centroid(d);pos[0] = 半径 * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);返回 [arc.centroid(d), arc.centroid(d), arc.centroid(d)];}).transition().duration(secDur).delay(function(d, i) {返回 arcAnimDur + i * secIndividualdelay;}).attr('points', function(d) {var pos = externalArc.centroid(d);pos[0] = 半径 * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);返回 [arc.centroid(d),outerArc.centroid(d), pos];});};画();var button = document.querySelector('button');var 重放 = 函数重放(){d3.selectAll('.slices').transition().ease('back').duration(500).delay(0).style('opacity', 0).attr('transform', 'translate(0), 250)').remove();d3.selectAll('.lines').transition().ease('back').duration(500).delay(100).style('opacity', 0).attr('transform', 'translate(0), 250)').remove();d3.selectAll('.labels').transition().ease('back').duration(500).delay(200).style('opacity', 0).attr('transform', 'translate(0), 250)').remove();设置超时(绘制，800)；};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></html> 解决方案
这对于 SO 来说可能太宽泛，但这是我喜欢在没有任何外部库或插件的情况下创建工具提示的方式.它基于创建一个
，我们将使用opacity"显示/隐藏.
首先，设置工具提示的 CSS 样式，使用一个类名为工具提示"或任何其他名称的 div:
div.tooltip {位置:绝对；/*你的其他风格在这里*/；}然后，设置工具提示变量:
var tooltip = d3.select("body").append("div").attr(类"，工具提示").style("不透明度", 0);这个 div 的不透明度为 0.然后只需在 mouseover 或 mousemove 上显示工具提示:
text.on("mousemove", function(d) {tooltip.html("你好，我是工具提示！").style('top', d3.event.pageY - 6 + 'px').style('left', d3.event.pageX + 10 + 'px').style("不透明度", 1);}).on("mouseout", function(d) {tooltip.style("不透明度", 0);});您可以使用 HTML 标签来设置工具提示内文本的样式，使其变为粗体、斜体等.
这是您的 CodePen:http://codepen.io/anon/pen/rWyyra?editors=0010
尽管这是问题中所述特定问题的正确答案，但这里有一个回答您的编辑的片段(指向另一个问题):
'use strict';var 数据集 = [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', '白色', '白色'];var 月份 = ['一月 - 2016'、'二月 - 2016'、'三月 - 2016'、'四月 - 2016'、'五月 - 2016'、'六月 - 2016'、'七月 - 2016'、'八月 - 2016'', 'September - 2016', 'October - 2016', 'November - 2016', 'December - 2016'];var dataWeeks = ["第 1 周:32
第 2 周:54
第 3 周:19
第 4 周:12"，"第 1 周:22
第 2 周:14
周12<br>第 4 周:03"，"第 1 周:35<br>第 2 周:14<br>第 3 周:11<br>第 4 周:23"，"第 1 周:65<br>第 2 周:;br>第 3 周:16<br>第 4 周:11"、第 1 周:11<br>第 2 周:52<br>第 3 周:22<br>第 4 周:12"、第 1 周:09"br>第2周:44<br>第3周:59<br>第4周:87"，第1周:42<br>第2周:76<br>第3周:69<br>第3周"，第4周:第 1 周:11
第 2 周:65
第 3 周:69
第 4 周:33"、第 1 周:99
第 2 周:66
第 3 周:19"第 4 周:84"，第 1 周:16
第 2 周:66
第 3 周:11
第 4 周:86"，第 1 周:21
第 2 周:52
3:12第4周:37"，第1周:90第2周:69第3周:19第4周:17"]；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 tooltip = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0);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(dataset).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(dataset));text.enter().append('text').attr('dy', '0.35em').style("opacity", 0).attr("cursor", "default").style('fill', 函数(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) <数学.PI ?开始":结束"；}).transition().delay(function(d, i) {返回 arcAnimDur + i * secIndividualdelay;}).duration(secDur).style('opacity', 1);text.on("mousemove", function(d, i) {tooltip.html(dataWeeks[i]).style('top', d3.event.pageY - 6 + 'px').style('left', d3.event.pageX + 14 + 'px').style("不透明度", 1);}).on("mouseout", function(d) {tooltip.style("不透明度", 0);});var polyline = svg.select(".lines").selectAll("polyline").data(pie(dataset));polyline.enter().append("polyline").style("opacity", 0.5).attr('points', function(d) {var pos = externalArc.centroid(d);pos[0] = 半径 * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);返回 [arc.centroid(d), arc.centroid(d), arc.centroid(d)];}).transition().duration(secDur).delay(function(d, i) {返回 arcAnimDur + i * secIndividualdelay;}).attr('points', function(d) {var pos = externalArc.centroid(d);pos[0] = 半径 * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);返回 [arc.centroid(d),outerArc.centroid(d), pos];});};画();var button = document.querySelector('button');var 重放 = 函数重放(){d3.selectAll('.slices').transition().ease('back').duration(500).delay(0).style('opacity', 0).attr('transform', 'translate(0), 250)').remove();d3.selectAll('.lines').transition().ease('back').duration(500).delay(100).style('opacity', 0).attr('transform', 'translate(0), 250)').remove();d3.selectAll('.labels').transition().ease('back').duration(500).delay(200).style('opacity', 0).attr('transform', 'translate(0), 250)').remove();设置超时(绘制，800)；};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；大纲:无；字体大小:.6em；背景颜色:黑色；颜色:#fff;边框:1px 实心 #fff;字母间距:1px；-webkit-transition:全部 250 毫秒；过渡:全部 250 毫秒；}按钮:悬停{背景色:#fff;颜色:#0d0d0d；框阴影:0 0 2px #fff;}按钮:活动{不透明度:0.5；}div.工具提示{位置:绝对；填充:4px；背景:白色；边框:1px纯黑色；边界半径:2px；字体大小:14px；}<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><头><title>疯狂饼图</title><meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/><!-- 工具提示类--><link rel="stylesheet" href="http://vadikom.com/demos/poshytip/src/tip-skyblue/tip-skyblue.css" type="text/css"/><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><div class="textt" data-tip="这是数据."></div><script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script><script src="js/index.js"></script>