Как сделать выплывающую подсказку для картинки?

Question

Помогите, пожалуйста, в интернете ничего найти не могу.
Нужно сделать появление всплывающей подсказки когда пользователь наводит курсор на картинку

<img class="insta" src="https://img.freepik.com/premium-vector/instagram-app-icon-social-media-logo-vector-illustration_277909-403.jpg" alt="" height="80px" width="80px">

Answer 1

<img class="insta" src="https://img.freepik.com/premium-vector/instagram-app-icon-social-media-logo-vector-illustration_277909-403.jpg" alt="а это для плоховидящих" height="80px" width="80px" title="вот ваша подсказка">

используйте title, чтоб показать подсказку

Answer 2

Смотря какого формата подсказка нужна. Если просто обычный текст - то да, title будет вполне достаточно. Если нужен какой-то кастомный всплывающий балун, то рекомендую попробовать tippyjs (https://tippyjs.bootcss.com/)

Простенький пример. В документации есть больше вариантов кастомизации.

tippy('#myButton', {
  content: "Просто нажми на меня"
});
tippy('#myImage', {
  content: "Просто кот"
});

<button id="myButton">Просто кнопка</button>
<br /><br />
<img src="https://placekitten.com/100/100" id="myImage" title="Тайтл у картинки"/>

<link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/backdrop.css" />

<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>

БЛОГ НА HUSL

Как сделать выплывающую подсказку для картинки?

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