时间戳

首页 > 解决方案 > CSS：为什么我的工具提示定位不正确？

css - CSS：为什么我的工具提示定位不正确？

问题描述

在我的网站上，我有一个技能等级为 1-5 星的网格。当您将鼠标悬停在一行上时，您将获得一个解释星级的工具提示：

在此处输入图像描述

问题是在较小的屏幕上，一些技能名称会包含多行，这会导致工具提示跳起来很多：

在此处输入图像描述

下面是源代码的最小重新创建版本，没有所有绒毛。唯一需要注意的选择器是tooltip和tooltip-text。基本上，我检查了W3 Schools 的工具提示来学习如何创建自己的工具提示。

它是如何工作的：您将tooltip包装器及其嵌套添加tooltip-text到任何要悬停的元素中。该父元素需要将位置设置为relative. 这允许tooltip包装器绝对定位，具有 100% 的宽度和高度，因此悬停父级本质上等同于悬停工具提示。然后，您可以相对于tooltip包装器定位文本。

但是是什么导致工具提示在较小的屏幕上错位呢？

注意：请原谅格式错误的 HTML。我超过了字数限制，不得不即兴发挥。满星用 表示，f空的 用表示e以节省空间。

.tooltip {
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.tooltip .tooltip-text {
  align-items: center;
  background-color: #555;
  color: white;
  display: none;
  font-size: 1.4rem;
  justify-content: center;
  left: 0;
  border-radius: 5px;
  padding: 5px;
  position: relative;
}

.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  border-width: 5px;
  border-style: solid;
}

.tooltip .tooltip-top {
  bottom: calc(100% + 10px);
}

.tooltip .tooltip-top::after {
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-color: #555 transparent transparent transparent;
}

.tooltip .tooltip-right {
  left: calc(100% + 10px);
  margin-left: 10px;
}

.tooltip .tooltip-right::after {
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-color: transparent #555 transparent transparent;
}

.tooltip .tooltip-bottom {
  top: calc(100% + 10px);
}

.tooltip .tooltip-bottom::after {
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-color: transparent transparent #555 transparent;
}

.tooltip .tooltip-left {
  margin-right: 10px;
  right: 100%;
}

.tooltip .tooltip-left::after {
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-color: transparent transparent transparent #555;
}

.tooltip:hover .tooltip-text {
  display: flex;
}
#skills #skill-grid {
  column-gap: 100px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  row-gap: 40px;
}
#skills .skill-category {
  font-size: 1.8rem;
  margin-bottom: 20px;
}
#skills .skill-item {
  column-gap: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 10px;
  position: relative;
}
#skills .skill-item .tooltip-text {
  max-width: 100px;
  left: calc(100% - 100px);
}
#skills .skill-item .skill-name {
  grid-column: 1;
}
#skills .skill-item .skill-rating {
  align-self: center;
  display: inline;
  grid-column: 2;
  text-align: right;
}
#skills .skill-item .skill-rating .star {
  vertical-align: middle;
}

.star {
  height: 18px;
  width: 18px;
}
<section id="skills" class="container section">
<h2 class="heading-with-image">
<span>Skills and Abilities</span>
</h2>
<div id="skill-grid">
<div>
<h3 class="skill-category">Programming Languages</h3>
<div class="skill-item">
<span class="skill-name">C++</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Python</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">TypeScript (ES6)</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Kotlin</span>
<div class="skill-rating">ffffe</div>                
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">C# (Unity)</span>
<div class="skill-rating">
fffee
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Intermediate
</div>
</div>
</div>
</div>
<div>
<h3 class="skill-category">Frontend &amp; Backend</h3>
<div class="skill-item">
<span class="skill-name">HTML5</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">CSS/SASS/LESS</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">React (+Ant Design)</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">SQL (Oracle, postgres)</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">NodeJS, Express</span>
<div class="skill-rating">
fffee
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Intermediate
</div>
</div>
</div>
</div>
<div>
<h3 class="skill-category">Software Development</h3>
<div class="skill-item">
<span class="skill-name">OOP</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Debugging</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Code review</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Scrum</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Refactoring</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Game dev</span>
<div class="skill-rating">
fffee
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Intermediate
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Design patterns</span>
<div class="skill-rating">
fffee
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Intermediate
</div>
</div>
</div>
</div>
<div>
<h3 class="skill-category">Operating Systems</h3>
<div class="skill-item">
<span class="skill-name">Windows (7-10)</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Linux (Ubuntu)</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Linux kernel</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">VMs (VirtualBox)</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">macOS (Mojave)</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
</div>
<div>
<h3 class="skill-category">IDEs and Editors</h3>
<div class="skill-item">
<span class="skill-name">VS Code</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Visual Studio</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Qt Creator</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Android Studio</span>
<div class="skill-rating">
fffee
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Intermediate
</div>
</div>
</div>
</div>
<div>
<h3 class="skill-category">Collaboration</h3>
<div class="skill-item">
<span class="skill-name">Git, GitHub</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Slack</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">G Suite</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Jira</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Confluence</span>
<div class="skill-rating">
fffee
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Intermediate
</div>
</div>
</div>
</div>
<div>
<h3 class="skill-category">Languages</h3>
<div class="skill-item">
<span class="skill-name">English</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Armenian</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">German</span>
<div class="skill-rating">
fffee
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Intermediate
</div>
</div>
</div>
</div>
<div>
<h3 class="skill-category">Other</h3>
<div class="skill-item">
<span class="skill-name">Copy editing</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Technical writing</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Copy writing</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
</div>
</div>
</section>

标签： csstooltipcss-grid

解决方案

方法一

遵循 OP 的代码而不做任何更改

问题

问题是 position absolute 和 bottom 在不同的元素上，因此 css bottom 给出的结果与预期不同。

使固定

tooltip-top需要是position: absolute因为你正在计算那个的底部

解释

引用MDN：

  • 当位置设置为绝对或固定时，底部属性指定元素的底边与其包含块的底边之间的距离。（这是需要做的）
  • 当位置设置为相对时，底部属性指定元素的底部边缘移动到其正常位置上方的距离。（目前正在发生这种情况。由于缺少位置，它表现为相对，因此其底部从其正常位置向上移动。因此，对于更高高度的父母，它移动更多）

底部是父级高度 + 10px，因此对于占用 2 行的父级，高度更大，并且移动超过 1 行父级。当位置是绝对的，即使占据 2 行的元素的高度更多，底部是从该父级的底部计算的，因此高度间接无效，它的行为符合预期。

代码

.tooltip-text .tooltip-top {
  position: absolute;
  bottom: calc(50% + 10px);
}

修改后的代码片段

.tooltip {
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.tooltip .tooltip-text {
  align-items: center;
  background-color: #555;
  color: white;
  display: none;
  font-size: 1.4rem;
  justify-content: center;
  left: 0;
  border-radius: 5px;
  padding: 5px;
  position: relative;
}

.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  border-width: 5px;
  border-style: solid;
}

.tooltip .tooltip-top {
  bottom: calc(50% + 10px);
  position: absolute;
}

.tooltip .tooltip-top::after {
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-color: #555 transparent transparent transparent;
}

.tooltip .tooltip-right {
  left: calc(100% + 10px);
  margin-left: 10px;
}

.tooltip .tooltip-right::after {
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-color: transparent #555 transparent transparent;
}

.tooltip .tooltip-bottom {
  top: calc(100% + 10px);
}

.tooltip .tooltip-bottom::after {
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-color: transparent transparent #555 transparent;
}

.tooltip .tooltip-left {
  margin-right: 10px;
  right: 100%;
}

.tooltip .tooltip-left::after {
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-color: transparent transparent transparent #555;
}

.tooltip:hover .tooltip-text {
  display: flex;
}
#skills #skill-grid {
  column-gap: 100px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  row-gap: 40px;
}
#skills .skill-category {
  font-size: 1.8rem;
  margin-bottom: 20px;
}
#skills .skill-item {
  column-gap: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 10px;
  position: relative;
}
#skills .skill-item .tooltip-text {
  max-width: 100px;
  left: calc(100% - 100px);
}
#skills .skill-item .skill-name {
  grid-column: 1;
}
#skills .skill-item .skill-rating {
  align-self: center;
  display: inline;
  grid-column: 2;
  text-align: right;
}
#skills .skill-item .skill-rating .star {
  vertical-align: middle;
}

.star {
  height: 18px;
  width: 18px;
}
<section id="skills" class="container section">
<h2 class="heading-with-image">
<span>Skills and Abilities</span>
</h2>
<div id="skill-grid">
<div>
<h3 class="skill-category">Programming Languages</h3>
<div class="skill-item">
<span class="skill-name">C++</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Python</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">TypeScript (ES6)</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Kotlin</span>
<div class="skill-rating">ffffe</div>                
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">C# (Unity)</span>
<div class="skill-rating">
fffee
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Intermediate
</div>
</div>
</div>
</div>
<div>
<h3 class="skill-category">Frontend &amp; Backend</h3>
<div class="skill-item">
<span class="skill-name">HTML5</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">CSS/SASS/LESS</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">React (+Ant Design)</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">SQL (Oracle, postgres)</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">NodeJS, Express</span>
<div class="skill-rating">
fffee
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Intermediate
</div>
</div>
</div>
</div>
<div>
<h3 class="skill-category">Software Development</h3>
<div class="skill-item">
<span class="skill-name">OOP</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Debugging</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Code review</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Scrum</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Refactoring</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Game dev</span>
<div class="skill-rating">
fffee
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Intermediate
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Design patterns</span>
<div class="skill-rating">
fffee
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Intermediate
</div>
</div>
</div>
</div>
<div>
<h3 class="skill-category">Operating Systems</h3>
<div class="skill-item">
<span class="skill-name">Windows (7-10)</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Linux (Ubuntu)</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Linux kernel</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">VMs (VirtualBox)</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">macOS (Mojave)</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
</div>
<div>
<h3 class="skill-category">IDEs and Editors</h3>
<div class="skill-item">
<span class="skill-name">VS Code</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Visual Studio</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Qt Creator</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Android Studio</span>
<div class="skill-rating">
fffee
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Intermediate
</div>
</div>
</div>
</div>
<div>
<h3 class="skill-category">Collaboration</h3>
<div class="skill-item">
<span class="skill-name">Git, GitHub</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Slack</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">G Suite</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Jira</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Confluence</span>
<div class="skill-rating">
fffee
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Intermediate
</div>
</div>
</div>
</div>
<div>
<h3 class="skill-category">Languages</h3>
<div class="skill-item">
<span class="skill-name">English</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Armenian</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">German</span>
<div class="skill-rating">
fffee
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Intermediate
</div>
</div>
</div>
</div>
<div>
<h3 class="skill-category">Other</h3>
<div class="skill-item">
<span class="skill-name">Copy editing</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Technical writing</span>
<div class="skill-rating">
fffff
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Advanced
</div>
</div>
</div>
<div class="skill-item">
<span class="skill-name">Copy writing</span>
<div class="skill-rating">
ffffe
</div>
<div class="tooltip">
<div class="tooltip-text tooltip-top">
Competent
</div>
</div>
</div>
</div>
</div>
</section>

方法二

修改了OP的代码并简化了它

问题

  • HTML 结构不正确（可以改进）。
  • 在许多地方都有position: absolute很多工具提示定位，这是有问题的
  • Lot of calculations in css（左，宽度，最小宽度等）不是必需的

修复

  • 简化了 HTML 以及类和 css
  • position: absolute在一处使用工具提示定位
  • 移除left、width等不必要的css
  • .tooltip 现在是 .skill-rating 的子级，这是正常工作所必需的

你可以切换position: relative; css between .skill-item and .skill-rating for the position of the tool tip。

  • 如果您想要关于评分的工具提示，请申请position: relative;.skill-rating
  • 如果您想要关于完整 div（评级 + 名称）的工具提示，请应用position: relative;.skill-item

修改后的代码片段

.skill-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  position: relative;
}

.skill-rating {

}

.tooltip {
  position: absolute;
  right: 0;
  bottom: 100%;
  display: none;
}

.tooltip-text {
  padding: 5px 15px;
  border-radius: 10px;
  background: #555;
  color: #fff;
}

.skill-item:hover .tooltip {
  display: block;
}

.tooltip::after {
  content: "";
  position: absolute;
  border-width: 5px;
  border-style: solid;
}

.tooltip::after {
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-color: #555 transparent transparent transparent;
}
<div>
  <h3 class="skill-category">Programming Languages</h3>
  <div class="skill-item">
    <div class="skill-name">
      C++
    </div>
    <div class="skill-rating">
      fffff
      <div class="tooltip">
        <div class="tooltip-text">
          Advanced
        </div>
      </div>
    </div>
  </div>
  <div class="skill-item">
    <div class="skill-name">Python</div>
    <div class="skill-rating">
      fffff
      <div class="tooltip">
        <div class="tooltip-text">
          Intermediate
        </div>
      </div>
    </div>
  </div>
  <div class="skill-item">
    <div class="skill-name">TypeScript Language (Ecma Script 6)</div>
    <div class="skill-rating">
      fffff
      <div class="tooltip">
        <div class="tooltip-text">
          Advanced
        </div>
      </div>
    </div>
  </div>
</div>

编辑：为该问题添加了另一种方法

希望能帮助到你。如有任何疑问，请回复。

推荐阅读