Why is my CSS opacity transition not working?

I just started to learn CSS and ran into a problem with opacity transition for tooltips. I made an example that only includes the code that apply to this problem. I have created some tooltips and wanted to add a opacity transition to some variations of the tooltips, but I cant get this to work.

when hovering the text the visibility triggers fine, but when adding a second class to the element that controls the opacity on hover nothing happens, I have tried rewriting this to use only one class but that yielded the same result. From all the documentation I found and read this should be working so I am stomped.

Any advice how to fix this would be much appreciated.

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  text-align: center;
}

.tooltip_content{
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: orangered;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
}

#tooltip_content_demo_8{
  position: absolute;
  z-index: 1;
  top: -10px;
  left: 105%;
  opacity: 0.1;
  transition: opacity 1s;
}

#tooltip_content_demo_8::after{
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

.tooltip:hover .tooltip_content{
  visibility: visible;
}
.tooltip:hover .tooltip_content_styled{
  opacity: 1;
}

</style>



<body style="text-align:center;">

<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from nearly invisible to visible.</p>

<div class="tooltip" id="tooltip_demo_8">Hover over me to tooltip
<span class="tooltip_content tooltip_content_styled" id="tooltip_content_demo_8">This is the tooltip text content</span>
</div><br/>

</body>
</html>

Solution

The ID selector always dominates by class. Therefore, the special condition !important must be added for opacity: 1 to work. Here is an example below.

body {
  text-align: center;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  text-align: center;
}

.tooltip_content {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: orangered;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
}

#tooltip_content_demo_8 {
  position: absolute;
  z-index: 1;
  top: -10px;
  left: 105%;
  opacity: 0.1;
  transition: opacity 1s;
}

#tooltip_content_demo_8::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%;
  /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

.tooltip:hover .tooltip_content {
  visibility: visible;
}

.tooltip:hover .tooltip_content_styled {
  opacity: 1 !important;
}

<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from nearly invisible to visible.</p>

<div class="tooltip" id="tooltip_demo_8">Hover over me to tooltip
  <span class="tooltip_content tooltip_content_styled" id="tooltip_content_demo_8">This is the tooltip text content</span>
</div><br/>