我的情况和目标
我的网页布局与代码片段中的一样。导航内容是动态的，所以我不知道它的宽度，与tooltipcontainer之后的内容相同。因此，我无法使用 CSS 计算 tooltipcontainer 剩余页面的宽度（据我所知）。但是，我想在不扩展网页宽度的情况下最大化网页内的工具提示宽度，因为我需要放入工具提示中的文本超过 3 个单词。我想在没有 JavaScript 的情况下实现这一点，至少有一个 CSS 后备。万一 JavaScript 不工作，我仍然想要一个工作的网页。
我的想法（都行不通）：
据我了解，工具提示本身需要在 tooltipcontainer 内部，以便能够将弹出窗口相对于 tooltipcontainer 的左侧定位。但是，如果tooltip是相对于tooltipcontainer的，那么它的宽度也只能是相对于tooltipcontainer或者absolute。绝对不起作用，因为我不知道我的导航宽度。我也不能 calc() 弹出窗口的宽度，因为我不能在计算中使用另一个元素（例如导航）的实际宽度。我可以为弹出窗口设置 width:max-content，但它也可以加宽视口/页面（创建 scollbars，如果不退出 tooltipcontainer 和 tooltip 的悬停区域就无法用鼠标到达）。也没有 max-right CSS 属性可用于将我的弹出窗口的右边框限制为主窗口或视口的右边框。
我最好的选择？
如果我没有监督任何东西，那么我只能为这个单页设置 popup width:60vw 和 main min-width:65vw ，所以它可以在离开 tooltipcontainer 和 tooltips 悬停区域时水平滚动 - 打破动态设计但是至少让内容在任何情况下都可用。
我会接受我的问题的解决方案，或者，如果没有，则确认没有，作为有效答案。
编辑
tooltip 和 tooltipcontainer 的位置分离不是我的选择。在大屏幕上，我什至无法识别最底部的提示，正如答案中所建议的那样。
编辑2
在代码片段中添加了另一个想法，这至少解决了一些用途的问题。希望有人扩展这个想法，以便它可以普遍使用，包括多行流文本。
.flexcontainer {display:flex}
main {flex:auto}
nav, main, div, span {border:1px solid black;
margin:0.2em;
padding:0.2em}
ul {margin:0;
padding:0 0 0 1.2em}
.tooltipcontainer {position:relative}
.tooltip {display:none;
background-color:lightyellow;
position:absolute;
top:100%;
left:0;
border:1px solid grey}
.tooltipcontainer:hover .tooltip {display:initial}
.tooltipanchor2 {flex:auto;
position:relative}
.tooltip2 {display:none;
background-color:lightyellow;
position:absolute;
top:1em;
left:0;
z-index:1000;
border:1px solid grey
width:max-content;
max-width:100%}
.tooltipcontainer2:hover .tooltip2 {display:initial}<div class="flexcontainer">
<nav>
<ul>
<li>item 1</li>
<li>long item 2</li>
<li>item 3</li>
</ul>
</nav>
<main>
<span>content before tooltipcontainer</span>
<span class="tooltipcontainer">
has tooltip
<div class="tooltip" style="width:max-content">
This is a tooltip with very long text that is so long that it expands the width of the webpage without breaking the line. Unfortunately, the page cannot even easily be scrolled horizontally without the mouse leaving this area, but leaving this area means that this text is hidden and the webpage is small again.
</div>
</span>
<span>content after tooltipcontainer</span>
<h3>Edit: another try</h3>
Caveat: "more content" cannot be in multiline flowtext
<div class="flexcontainer">
<div style="white-space:nowrap">content before tooltipcontainer</div>
<div class="tooltipanchor2">
<span class="tooltipcontainer2">
has tooltip
<div class="tooltip2">
This is a tooltip with a very long text. The text is so long that it breaks the line, even if the code snipped is displayed in fullscreen. This text is for demonstration purposes only.
</div>
</span>
<span>content after tooltipcontainer that breaks the line, which does not continue underneath "content before tooltipcontainer"</span>
</div>
</div>
</main>
</div>是的，工具提示悬停可以页面居中（并通过最大宽度根据您的需要进行调整），全部通过 CSS 代码。下面显示了您设置时的原始代码，后面是我们从外部源代码（有链接）修改的示例。网络上还有其他示例（这只是几个选项之一）。
.flexcontainer {
display: flex;
}
main {
flex: auto;
}
div, nav, main, span {
border: 1px solid black;
margin: 0.2em;
padding: 0.2em;
}
ul {
margin: 0;
padding: 0 0 0 1em;
}
.tooltipcontainer {
position: relative;
}
.tooltip {
display: none;
background-color: lightyellow;
position: absolute;
top: 100%;
left: 0;
border: 1px solid grey;
}
.tooltipcontainer:hover .tooltip {
display: initial;
}
/*--alternative tooltip method--*/
body {
font-family: Arial, san-serif;
font-size: 100%;
}
[data-tooltip] {
cursor: pointer;
display: inline-block;
line-height: 1;
position: relative;
}
[data-tooltip]::after {
background-color: rgba(51, 51, 51, 1);
border-radius: 0.3rem;
color: #fff;
content: attr(data-tooltip);
font-size: 1em;
font-size: 100%;
font-weight: normal;
line-height: 1.15em;
opacity: 0;
margin: 2px;
padding: 0.5em;
position: absolute;
text-align: center;
text-transform: none;
transition: opacity 0.2s;
visibility: hidden;
white-space: nowrap;
z-index: 1;
}
[data-tooltip].tooltip::before {
border-style: solid;
border-width: 0.3rem;
content: "";
opacity: 0;
position: absolute;
transition: opacity 0.2s;
visibility: hidden;
}
[data-tooltip].tooltip::before {
display: none;
}
[data-tooltip].tooltip:after {
font-size: 1rem;
max-width: 30rem;
position: fixed;
bottom: auto;
top: 50%;
left: 50%;
text-align: center;
transform: translate(-50%);
white-space: normal;
}
[data-tooltip]:hover::after, [data-tooltip]:hover::before {
visibility: visible;
opacity: 1;
}
.button {
background-color: #4CAF50;
border: none;
font-family: Arial, san-serif;
font-size: 100%;
line-height: 1em;
color: #fff;
padding: 2px;
margin: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel='stylesheet'>
<div class="flexcontainer">
<nav>
<ul>
<li>item 1</li>
<li>long item 2</li>
<li>item 3</li>
</ul>
</nav>
<main>
<span class="tooltipcontainer">
has tooltip
<div class="tooltip" style="width:max-content">
This is a tooltip with very long text that is so long that it expands the width of the webpage without breaking the line. Unfortunately, the page cannot even easily be scolled horizontally without the mouse leaving this area, but leaving this area means that this text is hidden and the webpage is small again.
</div>
</span>
<span>Your original Tooltip with content after .tooltipcontainer</span>
<hr>
<div class="wrapper">
<p> </p>
<div class="tooltip" data-tooltip="This tooltip is centered on all screen sizes (with max-width to fit your needs) xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx .">
<i class="fas fa-question-circle" focusable="false" aria-hidden="true"></i>
</div>
<span>Content after tooltip icon</span><br>
<p>Tooltip for all screens including mobile screen. Works on FF, Chrome, Edge. Set max-width to whatever you need.</p>
<sp><a href="https://codepen.io/PhiloBeddoe/pen/oNjzeGr" class="button">Source of this CSS code</a></p>
</div>
</main>
</div>