Как исправить взятие всплывающей подсказки html без стилей?

Question

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

Я пробовал свой код, запущенный в w3schoolsи это работает. Попробовал изменить значения в DevTools, и он все тот же в моем локальном.

<h4>
I am 
<input type=number>
years old 
<span class= "tooltip">Some Text</span>, my annual income old <br> 
is 
<input type=number> 
and I have saved <br> 
<input type=number class= "numbers"> 
<span class="sub">(pre-tax or tax-exempt)</span>
and 
<input type=number> <span>(taxed).</span>
</h4>

И примененные стили:

.tooltip {
    position: relative !important;
    border: 2px solid black !important;
    height: 100px;
    background: red !important;
    width: 100px;
}

И это то, что я получаю. Цвет фона и границы не виден, но он есть в источнике.

Answer 1

Проблема была решена путем изменения подсказки класса на другое имя, так как мои стили были переопределены ранее написанными стилями в среде.