CODEWITHSUNDEEP
javascriptd3.jsintro.js
user3518221
user3518221

Reputation: 97

D3 tooltip barely visible when using intro.js

I'm using D3 to create a series of circles that each have a tooltip via D3 onmouseover. I'm also using introJs as a tour to provide some commentary about the data. When the tour is running and the introJs tooltip is in view, the D3 tooltips are still there but they are barely visible like it has an opacity of .05. I have the D3 tooltip opacity set at .90 and have changed this to 1.0 to see if it would make a difference but hasn't. Has anyone had similar issues when using introJs with D3 and know how to make the D3 tooltip more visible?

Upvotes: 0

Views: 67

Answers (1)

user3518221
user3518221

Reputation: 97

I worked it out, all to do with z-index.

introJs has a tooltip z-index: 100000000. I was playing around with z-index for D3 tooltip but didn't go high enough in my tests. I eventually set the D3 tooltip to z-index: 1000000000 (added an extra 0 from introJs) and now it's all good.

Upvotes: 1

Related Questions