CSS: Why are my tooltips getting positioned incorrectly?

On my website, I have a grid with skills rated from 1-5 with stars. When you hover over a row, you'll get a tooltip interpreting the star rating:

The issue is that on smaller screens, some of the skill names wrap multiple lines, and that causes the tooltip to jump up quite a bit:

Below is a minimal re-created version of the source, without all the fluff. The only selectors of note are tooltip and tooltip-text. Basically, I inspected W3 Schools's tooltips to learn how to create my own.

How it works: You add the tooltip wrapper, with its nested tooltip-text, inside whatever element is going to get hovered. That parent element needs to have a position set to relative. This allows the tooltip wrapper to be positioned absolutely, with 100% width and height, so that hovering the parent is essentially equivalent to hovering the tooltip. Then, you can position the text relative to the tooltip wrapper.

But what is causing the tooltips to be misaligned on smaller screens?

NOTE: Please excuse the ill-formatted HTML. I ran over the character limit and had to improvise. Full stars are represented with f and empty with e to save 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>

Solution

Approach 1

following the OP's code without any changes

Issue

The issue is that position absolute and bottom are on different elements and so css bottom is giving the results differently from expectations.

Fix

tooltip-top needs to be position: absolute because you are calculating the bottom for that one

Explanation

Quoting from MDN:

When position is set to absolute or fixed, the bottom property specifies the distance between the element's bottom edge and the bottom edge of its containing block. (This is what needs to be done)
When position is set to relative, the bottom property specifies the distance the element's bottom edge is moved above its normal position. (This is currently happening. Since position is missing, it behaves as relative and thus its bottom is moved above from its normal position. So, for more height parents, it moves more)

bottom is parent height + 10px so for parents occupying 2 lines, height is more and it is moved more than 1 line parents. When position is absolute, even though height for elements occupying 2 lines is more, bottom is calculated from bottom of that parent and so height indirectly nullified and it behaves as per expectation.

Code

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

Modified Code Snippet

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

Approach 2

Modified OP's code and simplified it

Issues

HTML structure is not proper (can be improved).
Lot of position: absolute at many places for tooltip positioning which is problematic
Lot of calculations in css (left, width, min-width etc) which are not required

Fixes

Have simplified the HTML along with classes and css
Using position: absolute at one place for tooltip positioning
Removed left, width and other unnecessary css
.tooltip is now child of .skill-rating which is much required for proper working

You can switch position: relative; css between .skill-item and .skill-rating for the position of the tool tip.

If you want tooltip with respect to rating, apply position: relative; to .skill-rating
If you want tooltip with respect to full div (rating + name), apply position: relative; .skill-item

Modified Code Snippet

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

Edit: Have added another approach for the problem

Hope it helps. Revert for any doubts.