Подсказка прячется за заголовком таблицы

Question

У меня вопрос по поводу всплывающей подсказки, подсказка скрывается за заголовком таблицы или отображается в одном поле, но не отображается.

Пожалуйста, обратитесь к изображению, где подсказка прячется за другим div (маркетинг, показанный на изображении в подсказке):

.tooltipCustom {
  position: relative;
  display: inline-block;
}

.tooltipCustom .tooltipCustomtext {
  visibility: hidden;
  width: 120px;
  background-color: #efeee6;
  color: #868474;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  border-width: 1px;
  border-style: solid;
  border-color: black;
  /* Position the tooltip */
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltipCustom:hover .tooltipCustomtext {
  visibility: visible;
}

<div class='tooltipCustom'>

  <sup style="vertical-align: top">
    Something
   </sup>

  <span class='tooltipCustomtext'> 
    Underlying price: List price <br/>
    Applied Discounts: Marketing
  </span>

</div>

Answer 1

Я думаю, что в приведенном выше div определен z-индекс, вам нужно поместить более высокое значение z-index на всплывающую подсказку, чтобы оно было впереди предыдущего div:

.mypreviousDiv {
  z-index: 100;
}

.tooltipCustom .tooltipCustomtext {
   z-index: 101; // ou higher, for tooltips we can put 9999
}

Answer 2

Исправьте это

/* Position the tooltip */
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -60px;

Например

/* Position the tooltip */
position: absolute;
top: 20px;
left: 50%;
margin-left: 0;