В HTML, без использования CSS, можно создать простой тултип с картинкой, используя атрибуты и теги, доступные в языке.
Вот пример кода, который позволяет создать тултип с картинкой:
<!DOCTYPE html>
<html>
<body>
<h2>Пример тултипа с картинкой</h2>
<!-- Элемент, на котором будет отображаться тултип -->
<span onmouseover="showTooltip(event)" onmouseout="hideTooltip()">Наведите курсор мыши</span>
<!-- Элемент, который представляет тултип -->
<div id="tooltip" style="display: none; position: absolute;">
<img src="path/to/image.jpg" alt="Изображение">
</div>
<script>
function showTooltip(event) {
// Получаем элемент, на котором произошло событие
var target = event.target;
// Получаем позицию курсора мыши
var x = event.clientX;
var y = event.clientY;
// Получаем ссылку на элемент, представляющий тултип
var tooltip = document.getElementById("tooltip");
// Устанавливаем позицию и отображаем тултип
tooltip.style.top = (y + 10) + "px";
tooltip.style.left = (x + 10) + "px";
tooltip.style.display = "block";
}
function hideTooltip() {
// Получаем ссылку на элемент, представляющий тултип
var tooltip = document.getElementById("tooltip");
// Скрываем тултип
tooltip.style.display = "none";
}
</script>
</body>
</html>
В этом примере мы используем события onmouseover и onmouseout для показа и скрытия тултипа соответственно. Когда курсор мыши наводится на элемент <span>, вызывается функция showTooltip, которая получает позицию курсора мыши (с помощью свойств event.clientX и event.clientY) и устанавливает позицию и видимость элемента тултипа (<div id="tooltip">). При перемещении курсора мыши за пределы элемента <span> вызывается функция hideTooltip, которая скрывает тултип, устанавливая свойство style.display элемента <div id="tooltip"> в значение "none".
Важно отметить, что данный пример является минимальным, и вы можете доработать его для достижения желаемого внешнего вида и функциональности. Например, вы можете добавить стилизацию с помощью CSS или использовать другие способы управления видимостью и позицией тултипа.