search

AnSavvides / d3act

d3 with React
MIT License
298 stars 26 forks source link

Tooltip not showing up although visible in code #14

Closed JoeGrasso closed 9 years ago

JoeGrasso commented 9 years ago

I deconstructed your repository to examine it in dev mode:

  1. Made your app.jsx my main render component.
  2. Replaced links to ./lib to ./components

App works, although the tool tips are not showing up, although clearly working in code (hidden is replaced with visible).

Before mouseover: < div class="tooltip" style="position: absolute; z-index: 10; visibility: hidden; border: 1px solid grey; border-radius: 3px; text-align: center; padding: 8px 0px; width: 100px; color: rgb(255, 255, 255); top: 375px; left: 401px; background-color: rgb(0, 0, 0);">Relay (12)< /div>

On mouseover:

< div class="tooltip" style="position: absolute; z-index: 10; visibility: visible; border: 1px solid grey; border-radius: 3px; text-align: center; padding: 8px 0px; width: 100px; color: rgb(255, 255, 255); top: 375px; left: 401px; background-color: rgb(0, 0, 0);">Relay (12)< /div>

Any ideas?

JoeGrasso commented 9 years ago

Nevermind, I had bootstrap.css and that was what was messing it up.

AnSavvides commented 9 years ago

Oh interesting, what about bootstrap.css was messing it up? I imagine it's the tooltip class clashing with Bootstrap.

Thanks for opening the issue in any case, it's probably a good idea to give some more unique class names to avoid conflicts with global styles.