0

Всем привет, ребята. Почему при наведении на svg не показывается tooltip, он же в div находиться. В чем причина, как думаете? Есть решение данной проблемы?

Код на Codepen (https://codepen.io/kekoklol/pen/qBVZXQK)

let tooltipElem;
document.onmouseover = function(event) {
  let target = event.target;

  // если у нас есть подсказка...
  let tooltipHtml = target.dataset.tooltip;
  if (!tooltipHtml) return;

  // ...создадим элемент для подсказки
  tooltipElem = document.createElement('div');
  tooltipElem.className = 'tooltip';
  tooltipElem.innerHTML = tooltipHtml;
  document.body.append(tooltipElem);

  // спозиционируем его сверху от аннотируемого элемента (top-center)
  let coords = target.getBoundingClientRect();

  let left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth) / 2;
  if (left < 0) left = 0; // не заезжать за левый край окна

  let top = coords.top - tooltipElem.offsetHeight - 5;
  if (top < 0) { // если подсказка не помещается сверху, то отображать её снизу
    top = coords.top + target.offsetHeight + 5;
  }

  tooltipElem.style.left = left + 'px';
  tooltipElem.style.top = top + 'px';
  tooltipElem.style.transform = 'none';
};

document.onmouseout = function(e) {

  if (tooltipElem) {
    tooltipElem.remove();
    tooltipElem = null;
  }

};
svg {
  width: 20px;
}
<div data-tooltip="Данный пользователь обожает котиков">Пользователь 2145
  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fa-user-check fa-w-20 fa-2x"><path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4zm323-128.4l-27.8-28.1c-4.6-4.7-12.1-4.7-16.8-.1l-104.8 104-45.5-45.8c-4.6-4.7-12.1-4.7-16.8-.1l-28.1 27.9c-4.7 4.6-4.7 12.1-.1 16.8l81.7 82.3c4.6 4.7 12.1 4.7 16.8.1l141.3-140.2c4.6-4.7 4.7-12.2.1-16.8z" class=""></path></svg>
</div>

2
  • Вы проверяете наличие tooltip непосредственно у элемента, на который наводите (let tooltipHtml = target.dataset.tooltip;), но у вашего SVG tooltip отсутствует, поэтому и не выводит.
    – Pilaton
    1 фев 2022 в 23:56
  • @Pilaton, спасибо, что направили на решение проблемы, я это ценю.
    – Lememlol
    2 фев 2022 в 1:40

1 ответ 1

0

Подсказка добавляется при "наезде" на элемент содержащему data-tooltip. Так как обработчики событий отлавливают onmouseover и onmouseout на всех элементах, то при попадании на SVG, у которого нет атрибута data-tooltip, подсказка исчезает.

Простейшее решение - сделать SVG "прозрачным" для действий мыши, с помощью pointer-events: none :

let tooltipElem;
document.onmouseover = function(event) {
  let target = event.target;

  // если у нас есть подсказка...
  let tooltipHtml = target.dataset.tooltip;
  if (!tooltipHtml) return;

  // ...создадим элемент для подсказки
  tooltipElem = document.createElement('div');
  tooltipElem.className = 'tooltip';
  tooltipElem.innerHTML = tooltipHtml;
  document.body.append(tooltipElem);

  // спозиционируем его сверху от аннотируемого элемента (top-center)
  let coords = target.getBoundingClientRect();

  let left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth) / 2;
  if (left < 0) left = 0; // не заезжать за левый край окна

  let top = coords.top - tooltipElem.offsetHeight - 5;
  if (top < 0) { // если подсказка не помещается сверху, то отображать её снизу
    top = coords.top + target.offsetHeight + 5;
  }

  tooltipElem.style.left = left + 'px';
  tooltipElem.style.top = top + 'px';
  tooltipElem.style.transform = 'none';
};

document.onmouseout = function(e) {

  if (tooltipElem) {
    tooltipElem.remove();
    tooltipElem = null;
  }

};
svg {
  width: 20px;
}

div[data-tooltip] * {
  pointer-events: none;
}
<div data-tooltip="Данный пользователь обожает котиков">Пользователь 2145
  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fa-user-check fa-w-20 fa-2x">
    <path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4zm323-128.4l-27.8-28.1c-4.6-4.7-12.1-4.7-16.8-.1l-104.8 104-45.5-45.8c-4.6-4.7-12.1-4.7-16.8-.1l-28.1 27.9c-4.7 4.6-4.7 12.1-.1 16.8l81.7 82.3c4.6 4.7 12.1 4.7 16.8.1l141.3-140.2c4.6-4.7 4.7-12.2.1-16.8z" class=""></path>
  </svg>
  <span>Текст</span>
</div>

3
  • Вместе с Вашим обновленным кодом не знаете, как решить проблему, если конструкция такова: <div data-tooltip="текст"><svg>...</svg><span>Текст</span>. В этой конструкции когда курсор наводишь на span то подсказка пропадает. Пробовал делать проверку, есть ли у родительского элемента дата атрибут, и если есть то выводить подсказку. Но ничего не получалось.. Спасибо большое за подсказку, Вы огромный молодец.
    – Lememlol
    2 фев 2022 в 1:38
  • а что предпринять, если вместо div тэг a? С <a> работает только на тексте "Пользователь 2145".
    – Lememlol
    2 фев 2022 в 1:49
  • @ОливерЛинкольн: добавьте для ссылки display: block; или display: inline-block;
    – UModeL
    2 фев 2022 в 1:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.