// Добавьте этот код на ваш сайт
Текст ссылки
/* CSS стили для подсказки */
.hint-tooltip {
position: absolute;
display: none;
background: white;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
z-index: 1000;
pointer-events: none;
max-width: 300px;
}
.hint-tooltip img {
max-width: 100%;
max-height: 100%;
display: block;
}
/* JavaScript для работы подсказок */
document.addEventListener('DOMContentLoaded', function() {
const tooltip = document.createElement('div');
tooltip.className = 'hint-tooltip';
document.body.appendChild(tooltip);
const links = document.querySelectorAll('a[data-url]');
links.forEach(link => {
const img = document.createElement('img');
img.src = link.dataset.url;
img.alt = 'Подсказка';
link.addEventListener('mouseenter', function(e) {
tooltip.innerHTML = '';
tooltip.appendChild(img.cloneNode(true));
tooltip.style.display = 'block';
updateTooltipPosition(e);
});
link.addEventListener('mousemove', updateTooltipPosition);
link.addEventListener('mouseleave', () => tooltip.style.display = 'none');
});
function updateTooltipPosition(e) {
const x = e.pageX + 15;
const y = e.pageY + 15;
tooltip.style.left = `${x}px`;
tooltip.style.top = `${y}px`;
}
});