相对于多个元素定位工具提示

Question

我想以特殊方式放置工具提示。我希望工具提示文本框的垂直位置相对于悬停的单词（正下方），但我希望宽度和水平位置相对于一般页面容器。所以本质上，工具提示具有与 2 个不同元素相关的变量。

感谢您的帮助。

这里是 link 当前情况： https://nilsoh.com/hovertext/

这是我希望它的工作方式（如果您将鼠标悬停在上方的“hoverme”上，蓝色工具提示应与文本的其余部分重叠）：

/* 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

您需要使工具提示位置绝对到 texten div，您可以通过从 [tooltip] 中删除 position: relative; 并将其添加到 .texten

注意：我使用了 link (https://nilsoh.com/hovertext/) 中的代码，您提供的代码还不够。

我希望你在寻找什么，祝你好运。

#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>

相对于多个元素定位工具提示

Position Tooltip relative to multiple elements

html

css

position

tooltip