Skip to content
Snippets Groups Projects
Commit 86589475 authored by Azadpour, Elmera's avatar Azadpour, Elmera
Browse files

add tooltip hover feature

parent 11a336e4
No related branches found
No related tags found
1 merge request!49Add tooltip hover feature
Hide whitespace changes
Inline Side-by-side
src/assets/text/text.js
+ 3
− 3
View file @ 86589475
......@@ -6,7 +6,7 @@ export default {
paragraph1: `Imagine, for example, that you live in a big house in the suburbs where clean water flows out of every faucet. There’s enough water for you and your family to grow a nice garden every year. The public water supplier treats the water and maintains the distribution system regularly, so you know the water is safe for you to drink. A small, clean stream flows through town, offering a cool place to swim and play during the hot summer months.`,
paragraph2: `Now imagine you live in a small rural community on the outskirts of town. You have your own well, but in recent years, you and your neighbors have had to dig deeper and deeper to reach water. Dangerous metals are leaching into the water belowground, but you have no way of treating your water before your family drinks it. Because of an ongoing drought, the sparse vegetation surrounding your house has turned a crispy brown. A nearby pond shrinks each summer and acquires a ghastly green hue as it’s choked by harmful algae blooms.`,
paragraph3: `This dreadful scene may sound unimaginable, but this nightmare is the unfortunate reality for many Americans. More than 2.2 million Americans lack running water and basic plumbing in their home <a href='https://www.digdeep.org/draining' target='_blank'>(DigDeep, 2022)</a>, and roughly 3% of community water systems have severe issues with water quality <a href='https://www.nature.com/articles/s41467-021-23898-z' target='_blank'>(Mueller and Gasteyer, 2021)</a>. Limited access to clean water may be triggered by a single event, like the <a href='storymaps target='_blank'>derailing of the train carrying hazardous chemicals in East Palestine, Ohio,</a> or may be the long-term result of aging infrastructure, as was the case with the <a href='https://www.npr.org/sections/thetwo-way/2016/04/20/465545378/lead-laced-water-in-flint-a-step-by-step-look-at-the-makings-of-a-crisis' target='_blank'>dangerously high levels of lead in the drinking water of Flint, Michigan.</a>`,
paragraph4: `Marginalized populations are often disproportionately affected by water insecurity. Communities of color and individuals living below the poverty line are frequently the hardest hit by water-related disasters, lacking the means to safeguard themselves adequately. They may face barriers to relocation or struggle to take time off work, cope with lost wages, or afford medical expenses. In the case of the Flint, Michigan, water crisis, black and low-income communities, who at the time made up <a href='https://apnews.com/general-news-7b2bcfdcc8d74ece9e0cb167a2239745' target='_blank'>57% and 42%</a> of Flint's population, respectively, were some of the socio-economically disadvantaged communities most affected by lead exposure. Regardless of the cause, the risk of experiencing water insecurity is closely related to the level of social vulnerability.`,
paragraph4: `Marginalized populations are often disproportionately affected by water insecurity. Communities of color and individuals living below the poverty line are frequently the hardest hit by water-related disasters, lacking the means to safeguard themselves adequately. They may face barriers to relocation or struggle to take time off work, cope with lost wages, or afford medical expenses. In the case of the Flint, Michigan, water crisis, black and low-income communities, who at the time made up <a href='https://apnews.com/general-news-7b2bcfdcc8d74ece9e0cb167a2239745' target='_blank'>57% and 42%</a> of Flint's population, respectively, were some of the socio-economically disadvantaged communities most affected by lead exposure. Regardless of the cause, the risk of experiencing water insecurity is closely related to the level of <span class="tooltip"><span class="tooltip-span">social vulnerability</span><span class="tooltiptext social-vulnerability">Conditions in which societal factors shape exposure to hazards, susceptibility to suffer harm, and ability to cope and recover from losses.</span></span>.`,
},
agVersusMunicipalText: {
title: "Social vulnerabilities in agricultural versus municipal sectors",
......@@ -27,7 +27,7 @@ export default {
paragraph6: "Placeholder text for now."
},
metaAnalysisText: {
title: "Meta-analysis of social vulnerability to water insecurity ",
title: "Meta-analysis of social vulnerability to water insecurity",
paragraph1: `Researchers in the USGS Social and Economic Drivers program <a href="https://www.usgs.gov/data/literature-summary-indicators-water-vulnerability-western-us-2000-2022">identified factors of social vulnerability associated with conditions of water insecurity</a>. The team focused their analysis on studies between 2000 and 2022 that took place in the conterminous United States (lower 48 states) west of the Mississippi River. The Western states face a slew of water availability challenges, including increasing population growth, dependence on groundwater, and generally low precipitation (see <a href='https://pubs.usgs.gov/circ/2005/circ1261/pdf/C1261.pdf'>Anderson and Woosley 2005</a> for a discussion of water availability in the Western United States).`,
paragraph2: `The team found that a small subset of social vulnerability factors was well studied and was consistently associated with water insecurity. These factors included multiple demographic characteristics (age, race/ethnicity, family structure, gender, and language proficiency), dependence on specific sources and uses of water, wealth, and exposure to water-related hazards.`,
paragraph3: `But these factors are not equally distributed across the Western United States. For example, certain races and ethnicities are more heavily concentrated in some geographic areas than in others. Similarly, some counties have much lower median household incomes than other counties do. Understanding where these vulnerable populations live is important information for water-resource managers to make equitable decisions about water availability and use.`
......@@ -35,7 +35,7 @@ export default {
socialVulnerabilityText: {
title: "Where do we go from here",
paragraph1: "A crucial and largely unexplored area of research is the intersectionality of social vulnerability factors. The factors evaluated by the researchers at USGS represent individual drivers of water insecurity, like household size or ethnicity. What about the people who experience multiple risk factors at the same time?",
paragraph2: `For example, “Elderly people who have lower incomes are a unique population, existing at the overlap of, but distinct from, the elderly or lower income alone,” says Oronde Drakes, social geographer at USGS and lead author of the meta-analysis. “The interaction of those social characteristics may well have different and significant impacts on water security than would be found exploring those social factors on their own.”`,
paragraph2: `For example, “Elderly people who have lower incomes are a unique population, existing at the overlap of, but distinct from, the elderly or lower income alone,” says Oronde Drakes, social geographer at USGS and lead author of the <span class="tooltip"><span class="tooltip-span">meta-analysis</span><span class="tooltiptext meta-analysis">Type of review study where researchers combine data from many different studies to try to identify bigger patterns across all the results.</span></span>.. “The interaction of those social characteristics may well have different and significant impacts on water security than would be found exploring those social factors on their own.”`,
paragraph3: "In this burgeoning field of social vulnerability to water insecurity, we have a lot left to learn. Once we better understand not only where water insecurity is happening, but who is most vulnerable and why, we will be better equipped to address environmental justice and equity issues in water resources."
},
teamText: {
......
src/components/BeeswarmChart.vue
+ 39
− 1
View file @ 86589475
......@@ -2,7 +2,7 @@
<section id="beeswarm">
<div id="text1" class="text-container">
<p>
Everyone needs access to clean water. The gap between water security and water insecurity (add tooltip here: Populations cannot maintain access to adequate quantities of water at an acceptable quality to sustain livelihoods, development, and human and ecosystem health) can be the difference between a daydream and a nightmare. People may be more vulnerable to water insecurity due to
Everyone needs access to clean water. The gap between water security and <span class="tooltip-group"><span class="tooltip-span"> water insecurity </span><span class="tooltiptext water-insecurity" > Populations cannot maintain access to adequate quantities of water at an acceptable quality to sustain livelihoods, development, and human and ecosystem health.</span></span> can be the difference between a daydream and a nightmare. People may be more vulnerable to water insecurity due to
<span
:class="['highlight', 'Demographiccharacteristics', { checked: isChecked.Demographiccharacteristics }]"
@click="toggleCategory('Demographiccharacteristics')"
......@@ -555,4 +555,42 @@ $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;
// bottom: 100%;
// left: 50%;
// transform: translateX(-50%);
margin-left: -170px;
margin-top: 2rem;
opacity: 0;
transition: opacity 0.3s;
}
.water-insecurity {
width: 200px;
margin-left: -170px;
}
.tooltip-group:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
src/components/Conclusion.vue
+ 39
− 28
View file @ 86589475
......@@ -32,34 +32,6 @@
</script>
<style scoped>
.tooltip-span {
position: relative;
cursor: pointer;
display: inline-block;
}
.tooltiptext {
visibility: hidden;
width: 200px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 100%; /* Position the tooltip above the text */
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
}
.tooltip-span:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.text-container {
margin-bottom: 20px; /* Add some space between text containers */
}
......@@ -69,4 +41,43 @@
margin: 20px auto; /* Center the images and add space around them */
}
</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;
// bottom: 100%;
// left: 50%;
// transform: translateX(-50%);
margin-left: -170px;
margin-top: 2rem;
opacity: 0;
transition: opacity 0.3s;
}
.meta-analysis {
width: 400px;
margin-left: -270px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
\ No newline at end of file
src/components/NarrativeIntro.vue
+ 39
− 28
View file @ 86589475
......@@ -26,34 +26,6 @@ const introText = text.components.introNarrative;
</script>
<style scoped>
.tooltip-span {
position: relative;
cursor: pointer;
display: inline-block;
}
.tooltiptext {
visibility: hidden;
width: 200px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
}
.tooltip-span:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.text-container {
margin-bottom: 20px;
}
......@@ -104,3 +76,42 @@ 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;
// bottom: 100%;
// left: 50%;
// transform: translateX(-50%);
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>
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