Bootstrap Popover/Tooltip映射区域上的图像

我试图结合来自Twitter的Bootstrap包和我已映射出的映像，以便各部分在滚动时产生弹出/工具提示旁边的映射区域。这是我迄今为止所做的：Bootstrap Popover/Tooltip映射区域上的图像

我使用CSS映射而不是旧的Image Map方式。代码如下。
图像及其上的区域在翻转时可见且突出显示。

现在我已经能够使弹出框出现，但它总是固定在图像的左上角（即使原始图像被重新定位）。

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

如何强制酥料饼旁边的映射区域表现？

来源

2012-07-27 mighty_squash

好我得到了一些帮助，我已经解决了我最初有问题。我的问题是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; 
} 
...

我敢肯定有一个更优雅解决这个问题的方法，但目前这段代码完全适合我。

来源

2012-07-27 15:18:49

时才可以自定义。奇怪的是，您将不得不使用单个ID，难道仅仅为每个锚点添加一个类（称为“jons”）并且然后使用$（“。jons”）。popover（{placement：'right'}）; – 2012-07-27 15:33:15

我很高兴你解决了它！:) – 2012-07-27 15:33:30

使用“位置”属性

查看文档这里tootip：http://twitter.github.com/bootstrap/javascript.html#tooltips

来源

2012-07-27 13:50:02

我已经在上面的代码中使用它。它正在改变popover箭头所面对的方向，但popover永远不会移动到我与之相关的区域旁边。 – 2012-07-27 13:52:37

有趣的是，很难真正知道发生了什么事，而没有看到它并能够玩它。不幸的是，bootstrap是一个自定义下载。你知道你使用了什么设置，以便我可以尝试重现这个问题吗？ – 2012-07-27 13:56:56

我刚刚下载了正常的软件包，然后找到了我需要的bootstrap的各个部分（bootstrap-tooltip.js和bootstrap-popover.js）。这是一个jsFiddle为雅http://jsfiddle.net/5L4Kv/5/ – 2012-07-27 13:59:51

Bootstrap Popover/Tooltip映射区域上的图像

回答

相关问题