Hiding Tip Blocks Content Behind It

[manassra]

Looking at the source code, tip.hide() sets the opacity of the tip to 0.0, but does not actually hide it from the web page. This works fine for some cases. However, the tip while invisible still blocks the content below it, and one cannot mouseover an SVG element that lies behind the hidden tip, for example. Shouldn't a variant of 'display: none' be used instead?

[khoussem]

there is the 'pointer-events': 'none', witch disable any cursor event handler, so I think tip.hide() should work just fine

[manassra]

But would that pass mouseover and click events to nodes lying behind it?

[khoussem]

yes, I made some tests and everything seems to work just fine, do you have an example where it did not?

[manassra]

Interesting. I have inspected the tip more closely, and when it is hidden, the css property pointer-events: none is not apparent. Would it be the case that I am using an outdated version of the d3-tip?

I am currently using this <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.min.js"></script>

[khoussem]

I am using the same version, and I don't have the problem. here is an example of the tag's style after being hidden:
style="left: 680.55px; top: 844.58px; position: absolute; opacity: 0; pointer-events: none;"

[manassra]

I ended up cloning this repo and using this source code instead. I am not having this issue anymore. It might have been a caching problem or something related to a bug in the minified version. Thanks!

[caged]

The code you were using was an older version. This should be fixed in versions >= v0.6.1.