图像上映射区域的引导弹出框/工具提示答案

【问题标题】：Bootstrap Popover/Tooltip for mapped areas on an Image图像上映射区域的引导弹出框/工具提示
【发布时间】：2012-07-27 13:22:16
【问题描述】：

我正在尝试将来自 Twitter 的 Bootstrap 包和我绘制的图像结合起来，以便部分将 - 当滚动时 - 在映射区域旁边产生一个弹出框/工具提示。这是我到目前为止所做的：

我使用 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;
}

如何强制弹出框出现在映射区域旁边？

【问题讨论】：

标签： javascript jquery css html twitter-bootstrap

【解决方案1】：

好的，我得到了一些帮助，我已经解决了我最初遇到的问题。我的问题是弹出框代码与我的锚（图片）而不是内容相关联。话虽如此，我不得不为每个内容使用单独的 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;
}
...

我确信有一种更优雅的方法可以解决这个问题，但目前这段代码非常适合我。

【讨论】：

这是有道理的。奇怪的是，您必须使用单独的 ID。简单地向每个锚点添加一个类（比如“jons”）然后使用 $(".jons").popover({ placement: 'right' });

【解决方案2】：

使用“展示位置”属性

在此处查看提示的文档：http://twitter.github.com/bootstrap/javascript.html#tooltips

【讨论】：

我已经在上面的代码中使用了它。它改变了弹出框箭头所面对的方向，但弹出框永远不会移动到我与之关联的区域旁边。
有趣，如果没有看到它并能够玩它，很难真正知道发生了什么。不幸的是，引导程序是自定义下载。您知道您使用了哪些设置以便我可以尝试复制问题吗？
我刚刚下载了普通包，然后找到了我需要的引导程序的各个部分（bootstrap-tooltip.js 和 bootstrap-popover.js）。这是你的 jsFiddle jsfiddle.net/5L4Kv/5
这很奇怪，我以为我粘贴正确了。又是这里：jsfiddle.net/5L4Kv/6 如果您想知道将鼠标悬停在图片上的“里程率”是什么（我知道在小屏幕上很难阅读）。
不，抱歉 - bootstrap 难以调试的原因之一是它在 fiddle 中不能很好地工作，并且只有在配置下载包时才能自定义代码