Position Tooltip relative to multiple elements

Question

I would like to position my tooltip in special way. I want the vertical position of the tooltip textbox to be relative to the hovered word (just below), but I would like the width and horizontal position to be relative to the general page container. So essentially the tooltip has variables relative to 2 different elements.

Thankful for any help.

Here's a link to the current situation: https://nilsoh.com/hovertext/

Here's how I would like it to work (if you would hover over the upper "hoverme" the blue tooltip should overlap the rest of the text):

/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
    color:red;
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;

  opacity: 0;
}
[tooltip]::before {
  content: '';
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */

  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;

  width: 80vw;
  height: auto;
  text-align: left;
  overflow: hidden;

  color: blue;
  left: 0;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
    left:0;
    background-color: aliceblue;
}

<div>
   <div class="texten">
    But I must explain <span tooltip="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet" flow="down">hoverme</span> pa kvallen dricker vi vin, det är jag och amanda.<span tooltip="Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet" flow="down">hoverme2</span> Ah en till oss pappa, och da sa kliar <span tooltip="Dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet" flow="down">hoverme3</span> alltid och latsas vara allergisk.
    </div>
</div>

Answer 1

You need to make the tooltip position absolute to the texten div, and you can do that by removing position: relative; from [tooltip] and add it to .texten

NOTE: I used the code from the link (https://nilsoh.com/hovertext/), the code you provided was not enough.

I hope what you are looking for and Good Luck.

#container{
    margin:10%;
}

/* START TOOLTIP STYLES */
[tooltip] { /* opinion 1 */
  color:red;
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
    
  opacity: 0;
}
[tooltip]::before {
  content: '';
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  width: 80vw;
  height: auto;
  text-align: left;
  overflow: hidden;

  color: blue;
  left: 0;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
    left:0;
    background-color: aliceblue;
}


/* FLOW: DOWN */

[tooltip][flow^="down"]::after {

}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {

}


/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: 1;
  }
}

/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}



/* UNRELATED to tooltips */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  background: #ededed;
}


.texten{
    color: green;
    font-size: 2em;
    position: relative;
}

<div id="container">
  <div>
     <div class="texten">But I must explain
    <span tooltip="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet" flow="down">hoverme</span> pa kvallen dricker vi vin, det är jag och amanda. <span tooltip="Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet" flow="down">hoverme2</span> Ah en till oss pappa, och da sa kliar <span tooltip="Dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet" flow="down">hoverme3</span> alltid och latsas vara allergisk.
      </div>
  </div>

</div>