依赖于元素位置的 CSS 属性？答案

【问题标题】：CSS property dependent of element position?依赖于元素位置的 CSS 属性？
【发布时间】：2022-12-31 23:45:22
【问题描述】：

我的目标是在 HTML 文档中显示样式化的工具提示。

因此我创建了这段代码：

.word-with-tooltip{
  position:relative;
 }
  
.tooltip{
  position:absolute;
  bottom:1.5em;
  right:0;
  height:100px;
  width:200px;
  display:none;
  border-style:solid;
  border-width:1px;
  border-color:gray;
  background-color:#dddddd;
  text-align:left;
 }

.word-with-tooltip:hover .tooltip{
  display:block;
 }

<div style="height:200px"></div>
  <div>
    <span class="word-with-tooltip">
      Left Car
      <div class="tooltip">A vehicle with four wheels</div>
    </span>
  </div>
  <div style="text-align:center;">
    <span class="word-with-tooltip">
    Centered Car
    <div class="tooltip">A vehicle with four wheels</div>
    </span>
  </div>
<div style="text-align:right;">
  <span class="word-with-tooltip">
    Right Car
    <div class="tooltip">A vehicle with four wheels</div>
  </span>
</div>
<div style="height:200px"></div>

基本它做了它应该做的事情：当鼠标悬停在一个词上时，浏览器会显示一个格式化的工具提示：

不幸的是，工具提示在左侧太远时被切断：

一种解决方案是设置 CSS 属性 left 而不是 right，具体取决于带有工具提示的单词所在的位置。位置可以变化，因为它可以在大文本中的任何位置。

题：是否有可能（以及如何）......

设置 CSS 属性left:0 如果单词位于屏幕的左半部分？
设置 CSS 属性right:0 如果单词位于屏幕的右半边？
设置CSS属性top:1em如果单词位于屏幕的上半部分？
设置 CSS 属性bottom:1em 如果单词位于屏幕的下半部分？

【问题讨论】：

标签： javascript html css

【解决方案1】：

找到一种方法：我添加了这些样式：

.word-with-tooltip.left .tooltip{left:0;}
.word-with-tooltip.right .tooltip{right:0;}

...并在 onmouseover 事件中动态分配它们。该代码如下所示（为了便于阅读，我将 onmouseover 属性的内容分开）：

<div>
<span class="word-with-tooltip"
onmouseover="
this.classList.remove('left');
this.classList.remove('right');
if(event.clientX<window.innerWidth/2){
    this.classList.add('left');
} else {
   this.classList.add('right');
}">
Left Car
<div class="tooltip">A vehicle with four wheels</div>
</span>
</div>

【讨论】：