Fix tooltip style rules
requested to merge hcorson-dosch/vulnerability-indicators:elmera_tooltip into tooltip-edit-water-haz
This MR cleans up the css for the tooltips.
There were a couple of issues:
- Previously, the css was in each component that used tooltips, which meant that the style rules from components imported later in
'VisualizationView.vue'
were overriding those for components that had already been imported (e.g., tooltip css in'Conclusion.vue'
was overriding that in'NarrativeIntro.vue'
). - Editing css for the class
tooltiptext
wouldn't work because that would change the z-index for all elements with that class. Instead we want to target individual tooltips by assigning them specific ids and then editing the css for those ids.
Two other notes:
- Your approach worked because inline styles are prioritized over all other css rules, but I think it's cleaner to do it this way
- Technically only a z-index > 10 (the z-index for
.tooltip-span
is needed, but 99 works.
This MR also fixes lint errors in the repo.
To test
Pull changes locally and run npm run dev
. Make sure all the tooltips look good and that the rest of the page content remains unchanged.