Отображение информации через tooltip

Question

Есть задача вывода регистрационного номера пользователя (SpecialNum) в tooltip, при наведении курсором мышки на иконку. Иконка отображается только у тех пользователей, кто имеет номер регистрации. Таким образом, сначала идет иконка, а затем текст "Регистрация подтверждена" (см. скриншот):

Получается только добавить идентификатор (SpecialNum) пользователя в строку (на скриншоте выделил желтым):

Фрагмент кода:

<td>
<span content="leaf:SpecialNum"></span>
<input type="hidden" content="leaf:SpecialNum" id="SpecialNum" onchange="if ($(this).val() != '') $(this).parent().find('img').show();" />
<img style="display: none;" width="15px" src="/Content/image/card.png" title="Пользователь Зарегистрирован" alt="Пользователь Зарегистрирован" />

<span content="leaf:Status"></span>

Заранее благодарю за помощь!

Answer 1

Атрибут title поможет.

Справка

.wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
p, img {
  display: block
}

img {
  border-radius: 100%;
}

<div class="wrap">
  <img src="https://picsum.photos/40/40" title="00002323109093">
  <p>Регистрация подтверждена</p>
</div>

Answer 2

Пожалуй дополню ответ от highpassion более компактной версией и с точки зрения запросов к серверу и корректности семантики разметки:

.reg {
  display: flex;
  gap: 4px;
  font-family: sans-serif;
  font-size: 1em;
}

.reg > [title] {
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cstyle type='text/css'%3E%0A.st0%7Bfill:%23008B42;%7D%0A.st1%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Ccircle class='st0' cx='7' cy='7' r='7'/%3E%3Crect x='6' y='6' class='st1' width='2' height='6'/%3E%3Ccircle class='st1' cx='7' cy='3.5' r='1.2'/%3E%3C/svg%3E");
  width: 16px;
  height: 16px;
  text-align: center;
}

<p class="reg"><span title="00002323109093"></span>Регистрация подтверждена</p>

Впрочем способов заморочиться на эту тему превеликое множество. Тут вам и :before с :after, и content:, и data-title="", и множество всего, хоть ты конкурс объявляй на самое безумное или оригинальное решение .)

БЛОГ НА HUSL

Отображение информации через tooltip

Ответы (2 шт):