From 09522fbf7cb85cd691fcad8df088cdb09ed03c9f Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Fri, 23 Aug 2024 10:05:11 -0500
Subject: [PATCH] Set margins and z-index for individual tooltips

---
 src/components/BeeswarmChart.vue  | 36 +++-----------------------
 src/components/Conclusion.vue     | 43 +++++++------------------------
 src/components/Maps.vue           | 36 +++-----------------------
 src/components/NarrativeIntro.vue | 40 +++++-----------------------
 4 files changed, 23 insertions(+), 132 deletions(-)

diff --git a/src/components/BeeswarmChart.vue b/src/components/BeeswarmChart.vue
index 34c1cdb..f2187a2 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 8700abc..16cc676 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 9e8f49c..59f2fe9 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 c84c60c..d08df53 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>
-- 
GitLab