javascript - 自定义悬停标签，如 Thinglink

Question

我正在尝试找到一种方法来模拟 Thinglink 的功能。

我附上一张图片，以便您更好地理解它。本质上，它是图片中的一个点，当你用鼠标悬停它时，它会显示一个文本框。

我的想法是，bootstrap 中的工具提示，但不确定是否可以在图片上制作...

编辑:

添加我的实际代码:

<div class="col-md-4 column wow fadeInRight delay=1000ms">
    <div id="tooltip1" data-toggle="tooltip" data-placement="top" title="keyword1">
        <div id="tooltip2" data-toggle="tooltip" data-placement="left" title="keyword2">
            <div id="tooltip3" data-toggle="tooltip" data-placement="bottom" title="keyword3">
                <img src="img/IPHONE_SCREENSHOT.png" alt="iOS" />
            </div
        </div>
    </div>
</div>

解决方案:

感谢@Wouter Florijn我添加了 Bootstrap 工具提示和透明 img 16x16，因为它需要工具提示才能工作。 (不能悬停在空白区域...)

<img src="img/IPHONE_SCREENSHOT.png" alt="iOS" />
<div class="dot" data-x="20%" data-y="25%"><a href="#" rel="tooltip" title="Feature 1"><img src="img/dot_transparent.png"/></a></div>
<div class="dot" data-x="80%" data-y="50%"><a href="#" rel="tooltip" title="Feature 2"><img src="img/dot_transparent.png" /></a></div>
<div class="dot" data-x="35%" data-y="80%"><a href="#" rel="tooltip" title="Feature 3"><img src="img/dot_transparent.png" /></a></div>
<div class="dot" data-x="55%" data-y="15%"><a href="#" rel="tooltip" title="Feature 4"><img src="img/dot_transparent.png" /></a></div> 

Answer 1

需要为图片制作一个容器div，然后在容器内添加一些绝对定位的div。

我认为最好使用 JS 来定位点。

然后，使用任何你想要的方式将工具提示添加到 .dot div。 jQuery UI、Bootstrap、Foundation...当然也可以是您自己的代码。

https://jsfiddle.net/7whLrjry/1/

HTML:

<div class="container">
    <img src="..." />
    <div class="dot" data-x="20%" data-y="25%"></div>
    <div class="dot" data-x="80%" data-y="50%"></div>
    <div class="dot" data-x="35%" data-y="80%"></div>
    <div class="dot" data-x="55%" data-y="15%"></div>
</div>

CSS:

.container {
    position: relative;
    max-width: 100%;
}
.container img {
    max-width: 100%;
}
.dot {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: black;
    border: 8px solid white;
    border-radius: 99999px;
    cursor: pointer;
}
.dot:hover {
    background-color: white;
    border: 8px solid black;
}

JS:

$(document).ready(function() {
    $('.dot').each(function() {
        $(this).css('left', $(this).data('x'));
        $(this).css('top', $(this).data('y'));
    });
});