Всем привет, ребята. Почему при наведении на 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>
tooltip
непосредственно у элемента, на который наводите (let tooltipHtml = target.dataset.tooltip;
), но у вашего SVGtooltip
отсутствует, поэтому и не выводит.