CODEWITHSUNDEEP
javascriptjqueryd3.js
Aparna
Aparna

Reputation: 783

D3 tooltip - keep mouse on tooltip with html elements

I have implemented d3 tooltip acording to the answer of this question(How can I keep a d3 mouseover open while my mouse is over the tooltip?). (Example link http://bl.ocks.org/larsenmtl/ec50d6ab230f127d5cd9)

It works fine if I have only text in the tooltip. But I wanted to add some html elements to the tooltip like a link or textbox. On hovering on these, the tooltip disppears! At the same time I can hover on any amount of plain text. Is there anyway to make it stay over on the html elements also?

Upvotes: 0

Views: 334

Answers (1)

lshettyl
lshettyl

Reputation: 8181

I think this is due to event bubbling. You'd need mouseenter/mouseleave as opposed to mouseover/mouseout. They are almost the same as mouseover and mouseout except that they don’t react to event bubbling. Therefore they see the entire HTML element they’re registered to as one solid block and don’t react to mouseovers and –outs taking place inside the block.

Unrelated to D3, but, there is a good interactive demo on the jQuery mouseover docs at the bottom of the page that explains this.

So, replace your over/out with enter/leave and you'd be fine.

.on('mouseenter', function(d, i) {
    tip.transition().duration(0);
})
.on('mouseleave', function(d, i) {
    tip.style('display', 'none');
});

Upvotes: 3

Related Questions