Текст исчезает, когда я добавляю класс всплывающей подсказки

Question

Я пытаюсь создать всплывающую подсказку, используя CSS и HTML, которая должна быть довольно простой. Но по какой-то странной причине, когда я добавляю класс «подсказка» к своему элементу, текст, над которым я хочу навести курсор, исчезает. Это происходит только тогда, когда я добавляю класс всплывающей подсказки, я могу дать тексту другие имена классов, и он работает просто отлично.

Вот мой код.

/* Tooltip container */
.tooltip {
 position: relative;
 display: inline-block;
 border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    cursor: pointer;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
 width: 120px;
 background-color: #555;
 color: #fff;
 text-align: center;
 padding: 5px 0;
 border-radius: 6px;

 /* Position the tooltip text */
 position: absolute;
 z-index: 1;
 bottom: 125%;
 left: 50%;
 margin-left: -60px;

 /* Fade in tooltip */
 opacity: 0;
 transition: opacity 0.3s;
}

.tooltip:hover > .tooltiptext {
    visibility: visible;
    opacity: 1;
}

<p> This is a paragraph that includes a <span class="tooltip">tooltip<span class="tooltiptext">Tooltip text</span></span> . </p>

Вот как это выглядит, когда я запускаю код:

Answer 1

Вам нужно отобразить всплывающую подсказку, как показано ниже:

Добавьте это:

.tooltip:hover > .tooltiptext {
    visibility: visible;
    opacity: 1;
} 

вот весь рабочий код:

/* Tooltip container */
.tooltip {
 position: relative;
 display: inline-block;
 border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    cursor: pointer;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
 width: 120px;
 background-color: #555;
 color: #fff;
 text-align: center;
 padding: 5px 0;
 border-radius: 6px;

 /* Position the tooltip text */
 position: absolute;
 z-index: 1;
 bottom: 125%;
 left: 50%;
 margin-left: -60px;

 /* Fade in tooltip */
 opacity: 0;
 transition: opacity 0.3s;
}

.tooltip:hover > .tooltiptext {
    visibility: visible;
    opacity: 1;
    z-index: 100;
}

<p> This is a paragraph that includes a <span class="tooltip">tooltip<span class="tooltiptext">Tooltip text</span></span> . </p>