diff --git a/src/components/BeeswarmChart.vue b/src/components/BeeswarmChart.vue
index 34c1cdbb5ca9266c008d22c575d9545ecd5a403d..f2187a2a79b98fc39b054ca580008b9d8c997a03 100644
--- a/src/components/BeeswarmChart.vue
+++ b/src/components/BeeswarmChart.vue
@@ -546,37 +546,7 @@ $ThemeGrey: rgba(217, 217, 217, 0.95);
     }
   }
 
-
-</style>
-
-<style lang="scss">
-.tooltip-span {
-  position: relative;
-  cursor: pointer;
-  display: inline-block;
-  border-bottom: 1px dotted rgba(54, 54, 54, 0.8);
-  z-index: 10;
-}
-
-.tooltiptext {
-  visibility: hidden;
-  width: 200px;
-  background-color: #555;
-  color: #fff;
-  text-align: center;
-  border-radius: 6px;
-  padding: 5px;
-  position: absolute;
-  z-index: 1;
-  margin-left: -170px;
-  margin-top: 2rem;
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-
-.tooltip-group:hover .tooltiptext {
-  visibility: visible;
-  opacity: 1;
-}
+  #water-insecurity-tooltip {
+    margin-left: -160px;
+  }
 </style>
-
diff --git a/src/components/Conclusion.vue b/src/components/Conclusion.vue
index 8700abc2ceb9f224a4d3e250f5762d75756358ff..16cc6768bd2102c56dfdf1f003b75131a725787a 100644
--- a/src/components/Conclusion.vue
+++ b/src/components/Conclusion.vue
@@ -43,38 +43,15 @@
   </style>
 
 <style lang="scss">
-.tooltip-span {
-  position: relative;
-  cursor: pointer;
-  display: inline-block;
-  border-bottom: 1px dotted rgba(54, 54, 54, 0.8);
-  z-index: 10;
-}
-
-.tooltiptext {
-  visibility: hidden;
-  width: 200px;
-  background-color: #555;
-  color: #fff;
-  text-align: center;
-  border-radius: 6px;
-  padding: 5px;
-  position: absolute;
-  z-index: 1;
-  margin-left: -120px;
-  margin-top: 2rem;
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-
-.meta-analysis {
-  width: 200px;
-  margin-left: -80px;
-}
-
-.tooltip:hover .tooltiptext {
-  visibility: visible;
-  opacity: 1;
-}
+  #intersectionality-tooltip {
+    margin-left: -165px;
+  }
+  #meta-analysis-tooltip {
+    margin-left: -150px;
+    z-index: 99;
+  }
+  #environmental-justice-tooltip {
+    margin-left: -180px;
+  }
 </style>
   
\ No newline at end of file
diff --git a/src/components/Maps.vue b/src/components/Maps.vue
index 9e8f49c7247e9612f3cb0e77b049a98cc0e42c05..59f2fe9a0d9f154d50fc7c5a95c8dc36da5819d8 100644
--- a/src/components/Maps.vue
+++ b/src/components/Maps.vue
@@ -174,37 +174,7 @@ figcaption {
 </style>
 
 <style lang="scss">
-.tooltip-span {
-  position: relative;
-  cursor: pointer;
-  display: inline-block;
-  border-bottom: 1px dotted rgba(54, 54, 54, 0.8);
-  z-index: 10;
-}
-
-.tooltiptext {
-  visibility: hidden;
-  width: 400px;
-  background-color: #555;
-  color: #fff;
-  text-align: center;
-  border-radius: 6px;
-  padding: 5px;
-  position: absolute;
-  z-index: 1;
-  margin-left: -170px;
-  margin-top: 2rem;
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-
-.social-vulnerability {
-  width: 500px;
-  margin-left: -170px;
-}
-
-.tooltip:hover .tooltiptext {
-  visibility: visible;
-  opacity: 1;
-}
+  #choropleth-map-tooltip {
+    margin-left: -120px;
+  }
 </style>
diff --git a/src/components/NarrativeIntro.vue b/src/components/NarrativeIntro.vue
index c84c60caffb8f2a9b3c42bc829c0ed68316a74c8..d08df534eb1e410c89bc7c202f5357362216f583 100644
--- a/src/components/NarrativeIntro.vue
+++ b/src/components/NarrativeIntro.vue
@@ -78,37 +78,11 @@ const introText = text.components.introNarrative;
 </style>
 
 <style lang="scss">
-.tooltip-span {
-  position: relative;
-  cursor: pointer;
-  display: inline-block;
-  border-bottom: 1px dotted rgba(54, 54, 54, 0.8);
-  z-index: 10;
-}
-
-.tooltiptext {
-  visibility: hidden;
-  width: 200px;
-  background-color: #555;
-  color: #fff;
-  text-align: center;
-  border-radius: 6px;
-  padding: 5px;
-  position: absolute;
-  z-index: 1;
-  margin-top: 2rem;
-  opacity: 0;
-  transition: opacity 0.3s;
-  margin-left: -170px;
-}
-
-.social-vulnerability {
-  width: 500px;
-  margin-left: -170px;
-}
-
-.tooltip:hover .tooltiptext {
-  visibility: visible;
-  opacity: 1;
-}
+  #water-hazards-tooltip {
+    z-index: 99;
+    margin-left: -185px;
+  }
+  #social-vulnerability-tooltip {
+    margin-left: -165px;
+  }
 </style>