Javascript 工具提示跨浏览器兼容性
Javascript tooltip cross browser incompatability
各位程序员大家好!
我正在 d3.js 进行一个很酷的项目。目前我正在尝试使工具提示起作用,因为在 chrome 中它不会将 title 属性显示为普通工具提示。
我在网上找到了2个解决方案:
-在单独的框中显示元素的跨度。我似乎没有在我的项目中使用它。
-使用 d3 将 div 附加到 svg,以便在鼠标旁边出现一个浮动的文本框。我设法完成了这项工作,但仅限于 chrome。如果我在 Firefox 中执行此操作,该框将出现在左下角。我什至尝试 d3.mouse(this) 作为坐标,但它只是在意想不到的地方 pops。
在fiddle中,您可以同时看到"solutions"。
http://jsfiddle.net/fbba7u8h/5/
ps。 firefox 似乎在 "event" 问题上遇到了麻烦。
//正方形是在HTML中定义的,红圈是在js d3代码中做的
javascript:
d3.select("#square")
.on("mouseover", function(){return tooltip.style("visibility", "visible");})
.on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});
var tooltip = d3.select("body")
.append("div")
.attr("class", "halloTip")
.text("this is a tooltip using d3 js, in chrome it hovers next to mouse, in firefox it pops up in the bottom left! I also tried d3.mouse(this)[0] and [1] at the onMouseMove");
//css 样式:
.halloTip{
position:absolute;
z-index:10;
visibility:hidden;
text:qqq;
background-color:rgb(5, 225, 153);
stroke:black;
padding:11px;
}
.halloTip:hover{
visibility:hidden;
stroke-opacity:0.8;
}
尝试参考 d3.event 而不是事件。
.on("mousemove", function(){ ... d3.event.pageY ... }
如果这也不起作用,请尝试解决方法……例如:
var mouse = { x: 0, y: 0 };
document.addEventListener("mousemove", function(e) {
mouse.x = e.pageX;
mouse.y = e.pageY;
});
然后在其他回调中引用mouse.x/mouse.y
可能不是您问题的直接答案,但我想展示我在图表上实现的工具提示,包含圆圈作为数据点。
我的 HTML 非常简单,包含工具提示 "holder" <div>
容器和 <section>
元素,它包含整个 svg-graph,如下所示:
HTML:
<div id="tooltip" class="hidden">
<p><span id="date"></span></p>
<p><span id="value"></span></p>
</div>
<section class="graph"></section>
然后在我的 javascript 文件中,在我绘制圆圈的其他代码中,有 3 个事件侦听器:
JS:
var circles = svg.selectAll("circle")
.data(newData)
.enter()
.append("circle")
.attr(initialCircleAttrs)
.on("mouseover", handleMouseOver)
.on("mouseout", handleMouseOut);
现在 handleMouseOver
和 handleMouseOut
是包含整个逻辑的函数:
JS:
function handleMouseOut(d, i) {
d3.select(this).attr({
fill: "#fff",
"stroke-width": 2,
r: radius
});
//Hide the tooltip
d3.select("#tooltip").classed("hidden", true);
}
function handleMouseOver(d, i) {
d3.select(this).attr({
fill: "#426426",
"stroke-width": 0,
r: radius * 2
});
// Tooltip
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("cx")) - 40;
var yPosition = parseFloat(d3.select(this).attr("cy")) - 70;
//Update the tooltip position and text
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#value")
.text(parseFloat(d.Amount).toFixed(2));
d3.select("#date")
.text(dateFormat(parse(d.Date)));
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
}
handleMouseOver
函数改变圆圈的颜色,然后计算数据点的 x 和 y 坐标,并据此显示具有 css 属性的 #tooltip
position
设置为 absolute
,因此:
CSS:
#tooltip {
font-family:'Open Sans', Arial, sans-serif;
font-size:14px;
text-align:center;
pointer-events: none;
position: absolute;
height: auto;
padding: 10px;
background-color: rgba(0,0,0,0.7);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
}
#tooltip.hidden {
display: none;
}
handleMouseOut
函数只是将 class 隐藏添加到 #tooltip
。
如果有人想采用您提到的第一种方法,这可能会有所帮助。这是一个工具提示,作为在 mouseover
和 mouseout
事件上切换的单独容器。
我还应该补充一点,它在所有现代浏览器和 IE 中都能完美运行。
各位程序员大家好!
我正在 d3.js 进行一个很酷的项目。目前我正在尝试使工具提示起作用,因为在 chrome 中它不会将 title 属性显示为普通工具提示。
我在网上找到了2个解决方案:
-在单独的框中显示元素的跨度。我似乎没有在我的项目中使用它。
-使用 d3 将 div 附加到 svg,以便在鼠标旁边出现一个浮动的文本框。我设法完成了这项工作,但仅限于 chrome。如果我在 Firefox 中执行此操作,该框将出现在左下角。我什至尝试 d3.mouse(this) 作为坐标,但它只是在意想不到的地方 pops。
在fiddle中,您可以同时看到"solutions"。
http://jsfiddle.net/fbba7u8h/5/
ps。 firefox 似乎在 "event" 问题上遇到了麻烦。
//正方形是在HTML中定义的,红圈是在js d3代码中做的 javascript:
d3.select("#square")
.on("mouseover", function(){return tooltip.style("visibility", "visible");})
.on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});
var tooltip = d3.select("body")
.append("div")
.attr("class", "halloTip")
.text("this is a tooltip using d3 js, in chrome it hovers next to mouse, in firefox it pops up in the bottom left! I also tried d3.mouse(this)[0] and [1] at the onMouseMove");
//css 样式:
.halloTip{
position:absolute;
z-index:10;
visibility:hidden;
text:qqq;
background-color:rgb(5, 225, 153);
stroke:black;
padding:11px;
}
.halloTip:hover{
visibility:hidden;
stroke-opacity:0.8;
}
尝试参考 d3.event 而不是事件。
.on("mousemove", function(){ ... d3.event.pageY ... }
如果这也不起作用,请尝试解决方法……例如:
var mouse = { x: 0, y: 0 };
document.addEventListener("mousemove", function(e) {
mouse.x = e.pageX;
mouse.y = e.pageY;
});
然后在其他回调中引用mouse.x/mouse.y
可能不是您问题的直接答案,但我想展示我在图表上实现的工具提示,包含圆圈作为数据点。
我的 HTML 非常简单,包含工具提示 "holder" <div>
容器和 <section>
元素,它包含整个 svg-graph,如下所示:
HTML:
<div id="tooltip" class="hidden">
<p><span id="date"></span></p>
<p><span id="value"></span></p>
</div>
<section class="graph"></section>
然后在我的 javascript 文件中,在我绘制圆圈的其他代码中,有 3 个事件侦听器:
JS:
var circles = svg.selectAll("circle")
.data(newData)
.enter()
.append("circle")
.attr(initialCircleAttrs)
.on("mouseover", handleMouseOver)
.on("mouseout", handleMouseOut);
现在 handleMouseOver
和 handleMouseOut
是包含整个逻辑的函数:
JS:
function handleMouseOut(d, i) {
d3.select(this).attr({
fill: "#fff",
"stroke-width": 2,
r: radius
});
//Hide the tooltip
d3.select("#tooltip").classed("hidden", true);
}
function handleMouseOver(d, i) {
d3.select(this).attr({
fill: "#426426",
"stroke-width": 0,
r: radius * 2
});
// Tooltip
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("cx")) - 40;
var yPosition = parseFloat(d3.select(this).attr("cy")) - 70;
//Update the tooltip position and text
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#value")
.text(parseFloat(d.Amount).toFixed(2));
d3.select("#date")
.text(dateFormat(parse(d.Date)));
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
}
handleMouseOver
函数改变圆圈的颜色,然后计算数据点的 x 和 y 坐标,并据此显示具有 css 属性的 #tooltip
position
设置为 absolute
,因此:
CSS:
#tooltip {
font-family:'Open Sans', Arial, sans-serif;
font-size:14px;
text-align:center;
pointer-events: none;
position: absolute;
height: auto;
padding: 10px;
background-color: rgba(0,0,0,0.7);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
}
#tooltip.hidden {
display: none;
}
handleMouseOut
函数只是将 class 隐藏添加到 #tooltip
。
如果有人想采用您提到的第一种方法,这可能会有所帮助。这是一个工具提示,作为在 mouseover
和 mouseout
事件上切换的单独容器。
我还应该补充一点,它在所有现代浏览器和 IE 中都能完美运行。