Extending mouseover to another target element

Question

This is my first question ever. So, I tried to run a mouseover in my D3 script to trigger a hovered textfield (which is a div object) when moving the mouse over a certain button. Works pretty well so far.

var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);

.
.
.

node.append("foreignObject")
    .attr("class", "info")
    .attr("x", 55)
    .attr("y", -85)
    .attr("width", 30)
    .attr("height", 30)
    .append("xhtml:body")
    .html('<img src="images/information-icon.png" width=20 height=20>')

    .on("mouseover", function (d) {
        div.transition()
            .duration(200)
            .style("opacity", 0.9);
        div.html("text")
            .style("left", (d3.event.pageX - 5) + "px")
            .style("top", (d3.event.pageY - 10) + "px");
    })

    .on("mouseout", function (d) {
        div.transition()
            .duration(500)
            .style("opacity", 0);
    });

The problem now is that the textfield vanishes once I move my mouse away from the button. I somehow want to "extend" my mouseover target from the button to the textfield also, so that I'm still able to click links on it etc. Does someone have an idea how to establish that? I already tried to put the mouseout event on my textfield instead like that:

.on("mouseover", function (d) {
        div.transition()
            .duration(200)
            .style("opacity", 0.9);
        div.html("text")
            .style("left", (d3.event.pageX - 5) + "px")
            .style("top", (d3.event.pageY - 10) + "px")
            .on("mouseout", function (d) {
                div.transition()
                    .duration(500)
                    .style("opacity", 0);
            });

This won't work though, as the textfield won't vanish at all then. Does someone have an idea?

**EDIT:**Defined my question a bit different, I hope it won't be that confusing now...

Answer 1

Ok, when the text is displayed you should un-register the mouse over event from the button, so that the text does not move when you run your mouse over the div. When the text is opacity 0 then register the mouse over event back to the div.