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

Question

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

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

以下是源代码的最小重新创建版本，没有任何绒毛。唯一需要注意的选择器是tooltip 和tooltip-text。基本上，我检查了W3 Schools's tooltips 以了解如何创建自己的。

它是如何工作的：您将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>

Answer 1

方法 1

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

问题

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

修复

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

说明

引用MDN:

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

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

代码

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

---

方法2

修改了 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>

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

希望对您有所帮助。如有任何疑问，请回复。

Answer 2

取决于屏幕尺寸，请检查全屏尺寸并尝试更改屏幕尺寸

它可能没有显示准​​确的位置，但我设置了提示。它在我的屏幕上显示完美。所以，您需要检查并更改媒体查询规则以适应所有屏幕。

您可以编辑媒体查询 css 规则以确保工具提示定位像素完美。但是，我在编辑您的 css 文件时提到了一些块注释 /*this was added*/ 和 /*this was changed*/ 标记。

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

.tooltip .tooltip-text {
  align-items: center;
  background-color: #555;
  color: white;
  display: none;
  
  /*this was changed*/
    /*font-size: 1.4rem;*/
  /*this was changed*/
  
  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 {
/*    margin-top: -13%; */
}

.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;
}
/*this was added*/

.skill-item:hover{
  border-radius:3px;
  background:#e3e3e3;
  cursor:pointer;
}

/*this was added*/
/*this was changed*/

.skill-item:hover .tooltip > .tooltip-text {
  display: flex;
}

/*this was changed*/
#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;
  
  /*this was added*/
  
  transition-duration: 300ms;
  padding: 0px 5px;
  
  /*this was added*/
}
#skills .skill-item .tooltip-text {
  max-width: 100px;
  /*this was changed*/
  
  /*for centered alignment*/
  left: calc(50% - 100px);
  
  /*this was changed*/
}
#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;
}
/*this was added*/
@media only screen and (min-width: 400px) {
  .tooltip .tooltip-top {
    margin-top: -6%;
	background:green;
  }
}
@media only screen and (min-width: 600px) {
  .tooltip .tooltip-top {
    margin-top: -6%;
	background:blue;
  }
}
@media only screen and (min-width: 660px) {
  .tooltip .tooltip-top {
    margin-top: -11%;
	background:black;
  }
}

@media only screen and (min-width: 800px) {
  .tooltip .tooltip-top {
    margin-top: -9%;
	background:red;
  }
}

	@media only screen and (min-width: 1000px) {
  .tooltip .tooltip-top {
    margin-top: -11%;
	background:yellow;
  }
}
/*this was added*/

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

Answer 3

问题 - 是什么导致工具提示在较小的屏幕上错位？

原因： 默认情况下，元素的宽度和高度是这样计算的：

宽度 + 内边距 + 边框 = 元素的实际宽度

高度 + 填充 + 边框 = 元素的实际高度

这意味着：当您设置元素的宽度/高度时，该元素通常会显得比您设置的要大（因为元素的边框和填充添加到元素的指定宽度/高度）。

解决方案：box-sizing 属性解决了这个问题（我已将其分配给 .tooltip .tooltip-text 类）。

请注意，在解决了分配 box-sizing 属性溢出问题但工具提示外观受损后，要解决此问题，您必须以支持所有屏幕尺寸的方式进行设计（这就是响应性设计）。

您可以了解更多关于“box-sizing”here。

.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;
  /* ADDED PROPERTY */
  box-sizing: border-box;
}

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