javascript - Bootstrap PopoverTooltip for mapped areas on an Image

I'm trying to bine the Bootstrap pack from Twitter and an image that I have mapped out so that portions will--when rolled over--produce a popover/tooltip next to the mapped area. Here's what I've done so far:

I mapped using CSS instead of the old Image Map way. The code is below.
The image and the areas on it are visible and highlight when rolled over.

Now I've been able to make the popover appear but it is always fixated on the upper left of the image (even when the original image is repositioned).

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

How do I force the popover to appear next to the mapped areas?

I mapped using CSS instead of the old Image Map way. The code is below.
The image and the areas on it are visible and highlight when rolled over.

Now I've been able to make the popover appear but it is always fixated on the upper left of the image (even when the original image is repositioned).

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

How do I force the popover to appear next to the mapped areas?

Share Improve this question edited Jul 27, 2012 at 13:30 asked Jul 27, 2012 at 13:22 mighty_squash 1431 gold badge5 silver badges18 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

Okay I got some help and I've fixed the problems I was initially having. My problem was that the popover code was associated with my anchor (the picture) instead of the contents. That being said, I had to use the individual IDs for each piece of the contents:

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

And in the CSS, I followed this pattern:

...
#thing1, #jon3 {
    position:absolute;
    width:50px;
    height:17px;
    top:346px;
    left:194px;
}

#thing2, #jon4 {
    position:absolute;
    width:51px;
    height:17px;
    top:346px;
    left:141px;
}
...

I'm sure there's a more elegant way to approach this problem, but for the moment this code works perfectly for me.

Use the "placement" attribute

See the documentation for the tootip here: http://twitter.github./bootstrap/javascript.html#tooltips

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Bootstrap PopoverTooltip for mapped areas on an Image - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)