Javascript 工具提示跨浏览器兼容性

Question

各位程序员好！

我正在 d3.js 中开发一个很酷的项目。目前我正在尝试制作工具提示，因为在 chrome 中它不会将标题属性显示为普通工具提示。

我在网上找到了2个解决方案：

-在单独的框中显示元素的跨度。我似乎没有让它在我的项目中工作。

-使用 d3 将 div 附加到 svg，以便在鼠标旁边出现一个浮动文本框。我设法完成了这项工作，但仅限于 chrome。如果我在 Firefox 中执行此操作，该框将出现在左下角。我什至尝试了 d3.mouse(this) 作为坐标，但它只是在意想不到的地方弹出。

在小提琴中，您可以看到两种“解决方案”。

http://jsfiddle.net/fbba7u8h/5/

ps。 firefox 似乎在“事件”方面遇到了麻烦。

//square是在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; 
}

Answer 1

尝试引用 d3.event 而不是 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

Answer 2

可能不是您问题的直接答案，但我想在图表上展示我的工具提示实现，其中包含圆圈作为数据点。
我的 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坐标，并据此显示#tooltip，其css属性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 函数只是将隐藏类添加到#tooltip。

如果有人想采用您提到的第一种方法，这可能会有所帮助。这是一个工具提示，作为在 mouseover 和 mouseout 事件上切换的单独容器。
我还应该补充一点，它在所有现代浏览器以及 IE 中都能完美运行。