Skip to content
Snippets Groups Projects
Commit 09522fbf authored by Hayley Corson-Dosch's avatar Hayley Corson-Dosch
Browse files

Set margins and z-index for individual tooltips

parent c6e4c255
No related branches found
No related tags found
2 merge requests!61Fix tooltip style rules,!60Tooltip edit for water hazard definition
Hide whitespace changes
Inline Side-by-side
src/components/BeeswarmChart.vue
+ 3
− 33
View file @ 09522fbf
...@@ -546,37 +546,7 @@ $ThemeGrey: rgba(217, 217, 217, 0.95); ...@@ -546,37 +546,7 @@ $ThemeGrey: rgba(217, 217, 217, 0.95);
} }
} }
#water-insecurity-tooltip {
</style> margin-left: -160px;
}
<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;
}
</style> </style>
src/components/Conclusion.vue
+ 10
− 33
View file @ 09522fbf
...@@ -43,38 +43,15 @@ ...@@ -43,38 +43,15 @@
</style> </style>
<style lang="scss"> <style lang="scss">
.tooltip-span { #intersectionality-tooltip {
position: relative; margin-left: -165px;
cursor: pointer; }
display: inline-block; #meta-analysis-tooltip {
border-bottom: 1px dotted rgba(54, 54, 54, 0.8); margin-left: -150px;
z-index: 10; z-index: 99;
} }
#environmental-justice-tooltip {
.tooltiptext { margin-left: -180px;
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;
}
</style> </style>
\ No newline at end of file
src/components/Maps.vue
+ 3
− 33
View file @ 09522fbf
...@@ -174,37 +174,7 @@ figcaption { ...@@ -174,37 +174,7 @@ figcaption {
</style> </style>
<style lang="scss"> <style lang="scss">
.tooltip-span { #choropleth-map-tooltip {
position: relative; margin-left: -120px;
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;
}
</style> </style>
src/components/NarrativeIntro.vue
+ 7
− 33
View file @ 09522fbf
...@@ -78,37 +78,11 @@ const introText = text.components.introNarrative; ...@@ -78,37 +78,11 @@ const introText = text.components.introNarrative;
</style> </style>
<style lang="scss"> <style lang="scss">
.tooltip-span { #water-hazards-tooltip {
position: relative; z-index: 99;
cursor: pointer; margin-left: -185px;
display: inline-block; }
border-bottom: 1px dotted rgba(54, 54, 54, 0.8); #social-vulnerability-tooltip {
z-index: 10; margin-left: -165px;
} }
.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;
}
</style> </style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment