我想以特殊的方式定位我的工具提示。 我希望工具提示文本框的垂直位置相对于悬停的单词（就在下面），但我希望宽度和水平位置相对于一般页面容器。 所以工具提示基本上有两个不同元素的变量。
感谢你的帮助。
以下是当前情况的链接:https://nilsoh.com/hovertext/
null
/* 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>null
您需要将工具提示位置设置为textendiv的绝对位置，您可以通过从[tooltip]中删除position:relative；并将其添加到.texten中来实现这一点
注意:我使用了链接（https://nilsoh.com/hovertext/）中的代码，您提供的代码是不够的。
我希望你所寻找的和好运。
null
#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>