自定义悬停标记，如Thinglink
自定义悬停标记，如Thinglink
提问于 2015-03-31 21:13:05
我试图找到一种方法来模拟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，我添加了引导工具提示和透明的IMG16x16，它需要工具提示才能工作。(不能在空旷的区域内盘旋.)
<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> 回答 1
Stack Overflow用户
回答已采纳
发布于 2015-03-31 21:26:32
您需要为图片创建一个容器div，然后在容器中添加一些绝对定位的div。
我认为最好用JS定位点。
然后，使用任何您想要的工具将工具提示添加到.dot div中。jQuery UI，靴带，基金会.或者你自己的密码。
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;
}联署材料：
$(document).ready(function() {
$('.dot').each(function() {
$(this).css('left', $(this).data('x'));
$(this).css('top', $(this).data('y'));
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29378695
复制相关文章
相似问题
腾讯云开发者
