用于图像上映射区域的Bootstrap Popover/Tooltip
Bootstrap Popover/Tooltip for mapped areas on an Image
我正试图将Twitter上的Bootstrap包和我绘制的图像结合起来,这样当部分滚动时,就会在映射区域旁边产生一个popover/工具提示。以下是我迄今为止所做的:
- 我使用CSS而不是旧的图像映射方式进行映射。代码如下
- 图像及其上的区域在翻转时可见并高亮显示
现在我已经能够使弹出窗口出现,但它总是固定在图像的左上角(即使原始图像被重新定位)。
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Image Map</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link href="demo.css" rel="stylesheet">
<link href="style_common.css" rel="stylesheet">
<link href="style5.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="wrapper">
<a href="#" id="jon" rel="popover" data-original-title="Milage Rate"
data-content="Content..."><div id="milagerate"></div></a> <a
href="#"><div id="fairmarketvalue"></div></a> <a href="#"><div
id="netassessment"></div></a> <a href="#"><div id="adjustedfmv"></div></a>
<a href="#"><div id="exemptions"></div></a> <a href="#"><div
id="taxablevalue"></div></a>
</div>
</div>
<script src="jquery-1.7.2.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>
<script src="bootstrap/js/bootstrap-popover.js"></script>
<script type="text/javascript">
$(function() {
$('#jon').popover({
placement : 'bottom'
});
});
</script>
</body>
</html>
CSS:
@CHARSET "ISO-8859-1";
a {
color:white;
}
#wrapper{
background:white url(PB.jpg) no-repeat 0 0;
position:relative;
z-index:0;
width:530px;
height:570px;
}
#milagerate {
position:absolute;
width:27px;
height:17px;
top:346px;
left:347px;
}
#fairmarketvalue {
position:absolute;
width:56px;
height:15px;
top:319px;
left:177px;
}
#netassessment {
position:absolute;
width:50px;
height:17px;
top:346px;
left:194;
}
#adjustedfmv {
position:absolute;
width:51px;
height:17px;
top:346px;
left:141px;
}
#exemptions {
position:absolute;
width:51px;
height:17px;
top:346px;
left:245px;
}
#taxablevalue {
position:absolute;
width:51px;
height:17px;
top:346px;
left:295px;
}
#milagerate:hover, #fairmarketvalue:hover, #netassessment:hover, #adjustedfmv:hover, #exemptions:hover, #taxablevalue:hover {
border:1px solid red;
}
如何强制弹出窗口显示在映射区域旁边?
好的,我得到了一些帮助,我已经解决了最初遇到的问题。我的问题是popover代码与我的锚(图片)而不是内容相关联。话虽如此,我不得不为每一条内容使用单独的ID:
<script type="text/javascript">
$(function() {
$('#jon').popover({
placement : 'right'
});
$('#jon2').popover({
placement : 'right'
});
$('#jon3').popover({
placement : 'right'
});
$('#jon4').popover({
placement : 'right'
});
$('#jon5').popover({
placement : 'right'
});
$('#jon6').popover({
placement : 'right'
});
});
</script>
在CSS中,我遵循以下模式:
...
#thing1, #jon3 {
position:absolute;
width:50px;
height:17px;
top:346px;
left:194px;
}
#thing2, #jon4 {
position:absolute;
width:51px;
height:17px;
top:346px;
left:141px;
}
...
我相信有一种更优雅的方法来解决这个问题,但目前这段代码对我来说非常适用
使用"放置"属性
请参阅此处的提示文档:http://twitter.github.com/bootstrap/javascript.html#tooltips
相关文章:
- 销毁Bootstrap popover时出现Javascript错误
- Rails - Bootstrap popover js
- Ajax content for Twitter Bootstrap Popover
- Ember.js and Twitter Bootstrap Popover
- 用于图像上映射区域的Bootstrap Popover/Tooltip
- 模式和输入组插件中的Bootstrap popover
- 在Bootstrap popover内部执行JS
- Angularjs没有为Bootstrap Popover插入标题
- Twitter Bootstrap Popover添加了一个带有事件的回调函数
- Bootstrap Popover Trouble
- 在文本区域中的Keyup事件上触发Twitter Bootstrap Popover
- Bootstrap Popover不应该每次都被破坏
- Twitter bootstrap .popover 不起作用
- Twitter Bootstrap Popover:动态生成数据后重新定位或调整大小
- Vue js v-model inside a bootstrap popover content
- Bootstrap popover destroy&recreate 仅每秒工作一次
- Twitter Bootstrap Popover not working?
- Bootstrap popover类在javascript生成的内容上无法正常工作
- Bootstrap Popover on Input : hover
- 如何销毁Bootstrap Popover的所有实例