I have some tootips in my page. There is one tooltip(div) contains a input box and a button. I want to click outside the tooltip and then hide the tooltip. I tried this:

d3.select("body")
.on("click",function(){
    d3.select("#tooltip")
    .classed("hidden",true);
});

This works, but when I click the input box want to input some value, the tooltip still hide. How can I hide the tooltip only when I click outside the tooltip?

I also tried:

d3.select("body").filter().on("click",function(){})

But I don't how it works, I cannot select all elements except the tooltip(div).

I have some tootips in my page. There is one tooltip(div) contains a input box and a button. I want to click outside the tooltip and then hide the tooltip. I tried this:

d3.select("body")
.on("click",function(){
    d3.select("#tooltip")
    .classed("hidden",true);
});

This works, but when I click the input box want to input some value, the tooltip still hide. How can I hide the tooltip only when I click outside the tooltip?

I also tried:

d3.select("body").filter().on("click",function(){})

But I don't how it works, I cannot select all elements except the tooltip(div).

• javascript
• d3.js

1 Answer 1

Here is a solution:

var tooltip = d3.select("#tooltip");
var tooltipWithContent = d3.selectAll("#tooltip, #tooltip *");

function equalToEventTarget() {
    return this == d3.event.target;
}

d3.select("body").on("click",function(){
    var outside = tooltipWithContent.filter(equalToEventTarget).empty();
    if (outside) {
        tooltip.classed("hidden", true);
    }
});

JSFiddle: https://jsfiddle/LukaszWiktor/53yok58w/