simple tooltip

HTML

<div style="width: 920px; height: 484px; margin-bottom: 15px;"><img id="Image-Maps_9201111081848036" src="http://operationgroundswell.com/wp-content/uploads/2010/10/operation-groundswell-where-we-go2.jpg" alt="" width="920" height="483" usemap="#Image-Maps_9201111081848036" border="0">
<map name="Image-Maps_9201111081848036">

<map name="Image-Maps_9201111081848036"> <area title="Guatemala" shape="poly" coords="121,222,120,268,170,282,215,266,217,222," href="http://operationgroundswell.com/programs/where-we-go/summer/guatemala-2-4/" alt="Guatemala">
<div class="popover" id="Guatemala">
<h3>Guatemala</h3>
<p>Guatemala is the item that you are hovering on.</p></div>
</map>

<map name="Image-Maps_9201111081848036"> <area title="Peru" shape="poly" coords="181,322,237,288,301,297,307,361,232,364," href="http://operationgroundswell.com/programs/where-we-go/summer/peru-2/" alt="Peru">
<div class="popover" id="Peru">
<h3>Peru</h3>
<p>Peru is the item that you are hovering on.</p></div>
</map>
<map name="Image-Maps_9201111081848036"> <area title="Haiti" shape="poly" coords="229,233,235,275,298,277,308,251,284,227," href="http://operationgroundswell.com/programs/where-we-go/summer/haiti/" alt="Haiti">
<div class="popover" id="Haiti">
<h3>Haiti</h3>
<p>Haiti is the item that you are hovering on.</p></div>
</map>
<map name="Image-Maps_9201111081848036"> <area title="West Africa" shape="poly" coords="360,233,401,291,454,288,453,236,424,213," href="http://operationgroundswell.com/programs/where-we-go/summer/west-africa-2/" alt="West Africa">
<div class="popover" id="WestAfrica">
<h3>West Africa</h3>
<p>West Africa is the item that you are hovering on.</p></div>
</map> <map name="Image-Maps_9201111081848036"> <area title="Middle East" shape="poly" coords="498,242,480,212,444,196,447,173,559,171,563,203,538,243," href="http://operationgroundswell.com/programs/where-we-go/summer/middle-east-3/" alt="Middle East">
<div class="popover" id="MiddleEast">
<h3>Middle...

CSS

#Image-Maps_9201111081848036 {
    position: relative;
}

.popover {
    font-family: Helvetica, Arial, sans-serif;
    color: white;
    position: relative;
    z-index: 0;
    top: 100px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    width: 175px;
    height: auto;
    padding: 10px;
    border-radius: 10px;
    display: block;
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    border: 3px solid white;
    text-shadow: 0 -1px 0 #d45825;
    background: #fd7636;

    background: -webkit-linear-gradient(top, #fd7636 0%, #fa390f 100%);
    background: -moz-linear-gradient(top, #fd7636 0%, #fa390f 100%);
    background: -o-linear-gradient(top, #fd7636 0%, #fa390f 100%);
    background: -ms-linear-gradient(top, #fd7636 0%, #fa390f 100%);
    background: linear-gradient(top, #fd7636 0%, #fa390f 100%);
}

.popover:before {
    content: "";
    display: block;
    z-index: -1;
    width: 16px;
    height: 16px;
    background: #fa390f;
    margin-left: -10px;
    position: absolute;
    bottom: -11px;
    left: 50%;
    border-right: 3px solid white;
    border-bottom: 3px solid white;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.popover h3 {
    font-size: 16px;
    font-weight: bold;
}

.popover p {
    font-size: 14px;
    font-weight: 100;
}

.popover:hover {
    filter: alpha(opacity=100);
   opacity: 1;
   z-index: 5;
}

#Guatemala {
    top: -330px;
    left: 95px;
    z-index: 5;
}

#Peru {
    top: -330px;
    left: 135px;
}

#Haiti {
    top: -480px;
    left: 145px;
}

#WestAfrica {
    top: -535px;
    left: 330px;
}

#MiddleEast {
    top: -660px;
    left: 415px;
}

#EastAfrica {
    top: -630px;
    left: 420px;
}

#SoutheastAsia {
    top: -770px;
    left: 620px;
}

.on {
    -ms-filter:...

JavaScript

jQuery(function($) {
    function show() {
        var item = $(this).children('area').attr('alt');
        item = item.replace(/\s+/g, '');
        $('#' + item).addClass('on');
    }

    $('map').bind('click', show);

    $('map').bind('click', function() {
        var item = $(this).children('area').attr('alt');
        item = item.replace(/\s+/g, '');
        $('#' + item).removeClass('on');
    });
});