如何在手机上显示图像标题工具提示？

Question

我正在建立一个响应迅速的网站。在移动尺寸上，我想在触摸的图像上显示标题工具提示。请帮助我解决我的问题。

Answer 1

我看到了这个答案。您可以咨询

这是链接link post。

Answer 2

您可以为此使用JavaScript单击功能。

html

<span class="tooltip" title="This is the tooltip">
    <img src="https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" width="100" height="100">
</span>

css

.tooltip {
    position: relative;
    cursor: pointer;
 }

.tooltip .title-info {
    position: absolute;
    top: 25px;
    background: purple;
    color: #fff;
    padding: 4px;
    left: 0;
    white-space: nowrap;
  }

JavaScript

$(".tooltip").click(function () {
    var $title = $(this).find(".title-info");
    if (!$title.length) {
        $(this).append('<span class="title-info">' + $(this).attr("title") + '</span>');
    } else {
        $title.remove();
    }
});