Skip to content

Fix tooltip style rules

This MR cleans up the css for the tooltips.

There were a couple of issues:

  1. 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').
  2. 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.

Merge request reports