自定义悬停标签，如Thinglink

Question

我试图找到一种方法来模拟Thinglink的作用。

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

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

编辑：

添加我的实际代码：

<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'));
    });
});