NarrativeIntro.vue

<template>
  <section id="narrativeIntro">
    <div id="text1" class="text-container">
      <p v-html="introText.paragraph1" />
    </div>
    <img src="@/assets/images/water_security_less-stylized.png" class="img" />
    <div id="text2" class="text-container">
      <p v-html="introText.paragraph2" />
    </div>
    <img src="@/assets/images/water_insecurity_less-stylized.png" class="img" />
    <div id="text3" class="text-container quote">
      <p v-html="introText.paragraph3" />
    </div>
    <div id="text4" class="text-container">
      <p v-html="introText.paragraph4" />
    </div>
    <div id="text5" class="text-container">
      <p v-html="introText.paragraph5" />
    </div>
  </section>
</template>
  
<script setup>
import { onMounted, ref } from 'vue'
import { isMobile } from 'mobile-device-detect';
import text from "./../assets/text/text.js";
  
const introText = text.components.introNarrative;
const publicPath = import.meta.env.BASE_URL;
const data = ref([]);
const mobileView = isMobile;

</script>
  
<style lang="scss" scoped>
  #grid-container {
    display: grid;
    padding: 20px 0 20px 0;
    gap: 5px;
    grid-template-rows: max-content;
    justify-content: center;
    margin: auto;
    max-width: 90vw;
    min-width: 90vw;
  }
  
  #title-container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
  }
  
.tooltip-span {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted blue;
  z-index: 1;
}

.tooltiptext {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  left: 25%; /* Adjust this value as needed */
  right: 15%;
  width: 450px;
  background-color: rgba(54, 54, 54, 0.95);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  overflow: visible;
  font-size: 16px !important; /* Increase font size */
}

.tooltip-span:hover + .tooltiptext {
  visibility: visible;
}

  #water-security {
    max-width: 340px;
    margin: 10px
  }
  
  #water-insecurity {
    max-width: 340px;
    margin: 10px
  }
  
  #water-security.mobile, #water-insecurity.mobile {
    width: 100%;
  }
  
  .narrative-text-container {
  }
  
  .narrative-text-par {
     font-size: 12px;
     margin-top: 80px;
     text-align: left;
     margin-left: 80px;
  }
  
  #intro-container {
    padding: 5px 0px 0px 5px;
  }
  
  @media screen and (max-width: 600px) {
    #title-container {
      flex-direction: column;
      align-items: center;
    }
  
    #water-security, #water-insecurity {
      max-width: 100%;
      margin: 10px
    }
  }
  </style>