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

CSS: Why are my tooltips getting positioned incorrectly?

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

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

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

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

但是是什么导致工具提示在较小的屏幕上未对齐？

注意：请原谅格式错误HTML。我 运行 超过了字符数限制，不得不即兴创作。满星用 f 表示，空星用 e 表示以保存 space.

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

方法一

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

问题

问题是绝对位置和底部位于不同的元素上，因此 css 底部给出的结果与预期不同。

修复

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

的底部

说明

引用自MDN：

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

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

代码

.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（左、宽、min-width等）不需要

修复

  • 简化了 HTML 以及 类 和 css
  • 在一处使用 position: absolute 进行工具提示定位
  • 去掉left,width等不需要的css
  • .tooltip 现在是 child of .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>

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

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

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

it may not showed exactly positioned,but i was set the hint.It shows perfect in my screen.So,you need to check and change the media query rules to fit all the screen.

您可以编辑媒体查询 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>

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

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

width + padding + border = 元素的实际宽度

height + padding + border = 元素的实际高度

这意味着：当您设置元素的 width/height 时，该元素通常看起来比您设置的要大（因为元素的边框和填充被添加到元素指定的 width/height 中）。

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

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

您可以了解有关 "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>