Conclusion.vue

<template>
    <section id="socialVulnerabilityText">
        <div
      id="title"
      class="text-container title-text"
    >
      <h3><p v-html="conclusionText.title"></p></h3>
      <br>
        <div id="text1" class="text-container">
          <p v-html="conclusionText.paragraph1"></p>
        </div>
        <img src="@/assets/images/intersectionality_alaskan-elders.png" class="img" />
        <div id="text2" class="text-container">
          <p v-html="conclusionText.paragraph2"></p>
        </div>
        <div id="text3" class="text-container">
          <p v-html="conclusionText.paragraph3"></p>
        </div>
      </div> 
    </section>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { isMobile } from 'mobile-device-detect';
  import text from './../assets/text/text.js';
  
  const conclusionText = text.components.socialVulnerabilityText;
  const publicPath = import.meta.env.BASE_URL;
  const data = ref([]);
  const mobileView = isMobile;
  </script>
  
  <style scoped>
  .text-container {
    margin-bottom: 20px; /* Add some space between text containers */
  }
  
  #socialVulnerabilityText img {
    display: block;
    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;
  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>