CSS пользовательский шрифт всплывающей подсказки исчезает изображение

Question

У меня есть следующее CSS, которое отображает шрифт потрясающего изображения перед определенным текстом на основе имени элемента, а также подчеркивает этот текст. Это сделано для того, чтобы побудить пользователя навести курсор мыши для более подробного объяснения.

x-help {
    border-bottom: 3px solid #f00;
}

x-help::before {
        content: "\f059";
        font-family: 'Font Awesome\ 5 Free';
        text-decoration: inherit;
        padding-right: 0.5em;
        position: relative;
    }

У меня также есть следующий CSS, который отображает пользовательскую подсказку при наведении курсора, и все это прекрасно работает, за исключением случаев, когда исходный текст находится над шрифт потрясающего изображения исчезает.

x-help{
    position: relative;
}

    x-help::before {
        content: attr(data-title);
        position: absolute;
        bottom: -35px;
        display: inline-block;
        padding: 4px 10px;
        border-radius: 6px;
        white-space: nowrap;
    }

Какие маги c можно добавить к CSS, чтобы этого не происходило.

Спасибо.

Answer 1

Это потому, что вы сбрасываете содержимое :: before. Вместо этого вы можете использовать :: after.

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

x-help:hover::after {
  content: attr(data-title);
  position: absolute;
  left: 0;
  bottom: -35px;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: red;
  color: white;
  font-size: 15px;
  white-space: nowrap;
}

Вот скрипка: https://jsfiddle.net/fj5swmpr/

Answer 2

Вам необходимо добавить значок в тег x-help. Вот демо.

<x-help data-title="Hello world"><i class="fas fa-question-circle"></i> Hover over me and the bell unfortunately vanishes</x-help>

https://jsfiddle.net/rLayfjem/