CSS tooltip displaying behind text with one class and above text with another-CodePudding

I'm using font-awesome to display an "icon" that, when hovered over, will display a tooltip. All of this is achieved using CSS.

When the tooltip is displayed above the item (.top class) everything works fine and the tooltip being displayed appears over top of the page text. However, when I display the tooltip below the item (.bottom class), the the tooltip is displayed but the font-awesome icons of the page appear over top of the tooltip.

I can't figure out why it works one way and not the other.

.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 90vh;
}
.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
  z-index:10;
}

.tooltip:before {
  content: attr(data-text);
  position: absolute;
  display: none;
  color: white;
  background-color: blue;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 4px 4px 3px rgba(0,0,0,0.3);
  min-width: 400px;
  z-index:10;
}

.tooltip:after {
  content: "";
  position: absolute;
  border: 9px solid #000;
  display: none;
  z-index:10;
}

.tooltip:hover:before, .tooltip:hover:after{
    display: block;
}

.tooltip.right:before {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 15px;
}

.tooltip.right:after {
  border-color: transparent blue transparent transparent;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
}

.tooltip.bottom::before {
  top: 80%;
  margin-top: 15px;
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.bottom::after {
  border-color: transparent transparent blue transparent;
  top: 80%;
  transform: translateX(-50%);
  left: 50%;
}

.tooltip.top::before {
  bottom: 80%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 15px;
  min-width: 350px;
}

.tooltip.top::after {
  border-color: blue transparent transparent transparent;
  bottom: 80%;
  transform: translateX(-50%);
  left: 50%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<div >
  <div>
    Tooltip Top 1 <span  data-text="this is tip one."><i ></i></span>
  </div>
  <div>
    Tooltip Bottom 1 <span  data-text="this is tip two."><i ></i></span>
  </div>
  <div>
    Tooltip Bottom 2 <span  data-text="this is tip one."><i ></i></span>
  </div>
  <div>
    Tooltip Top 2 <span  data-text="this is tip two."><i ></i></span>
  </div>
</div>
<i ></i>

CodePudding user response：

You have everyone .tooltip has its own independent stacking context, within which the positioning of nested elements and pseudo-elements is coordinated. And since everyone .tooltip has the same z-index, then they are arranged among themselves in order, i.e. the last element will be higher than the rest.

In order for your popup elements to have a single context in which they can be consistent with each other using z-index, it is enough for .tooltip to remove z-index (or set to auto) and then the closest context will be the root element of the document (<html>).

If you really need a z-index for the whole group, you just need to set the z-index for the nearest common root element (in your case, this is .container).

.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 90vh;
  z-index: 10;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}

.tooltip:before {
  content: attr(data-text);
  position: absolute;
  display: none;
  color: white;
  background-color: blue;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 4px 4px 3px rgba(0,0,0,0.3);
  min-width: 400px;
  z-index:10;
}

.tooltip:after {
  content: "";
  position: absolute;
  border: 9px solid #000;
  display: none;
  z-index:10;
}

.tooltip:hover:before, .tooltip:hover:after{
    display: block;
}

.tooltip.right:before {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 15px;
}

.tooltip.right:after {
  border-color: transparent blue transparent transparent;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
}

.tooltip.bottom::before {
  top: 80%;
  margin-top: 15px;
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.bottom::after {
  border-color: transparent transparent blue transparent;
  top: 80%;
  transform: translateX(-50%);
  left: 50%;
}

.tooltip.top::before {
  bottom: 80%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 15px;
  min-width: 350px;
}

.tooltip.top::after {
  border-color: blue transparent transparent transparent;
  bottom: 80%;
  transform: translateX(-50%);
  left: 50%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<div >
  <div>
    Tooltip Top 1 <span  data-text="this is tip one."><i ></i></span>
  </div>
  <div>
    Tooltip Bottom 1 <span  data-text="this is tip two."><i ></i></span>
  </div>
  <div>
    Tooltip Bottom 2 <span  data-text="this is tip one."><i ></i></span>
  </div>
  <div>
    Tooltip Top 2 <span  data-text="this is tip two."><i ></i></span>
  </div>
</div>
<i ></i>