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映射區域上的圖像

回答

相關問題