Javascript 自定义悬停标记，如Thinglink

我正试图找到一种方法来模拟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>

您需要为图片创建一个容器div，然后在容器内添加一些绝对定位的div

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

然后，使用所需的任何工具向
.dot
div添加工具提示。jQuery UI，Bootstrap，基金会…或者你自己的代码


HTML:

JS:

所以你试过什么？如果你说“什么都不做”，那可能就是你应该开始的地方。我正在尝试用popover完成它，但我找不到在我的图像上获得它，所以请发布你尝试过的代码，我们将帮助你调试它。所以这不是免费的编码服务。我们不会为您编写代码。@Timleis您有我的实际代码，它可以工作，但我想指定工具提示的确切位置和一个点，或者告诉用户那里有工具提示的东西……太好了！！将调整它以实现工具提示，并将返回！
<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> 

<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>

.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;
}

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