Map Tooltips

fiddle.css

#map{
    background:url(/_layouts/images/advics.internet.branding/map.png) #FFFFFF;
    height:448px;
    position:relative;
}
#map ul {
    list-style:none;
}
.maplocation {
    position:absolute;
    min-width:10px;
    min-height:10px;
    cursor:pointer;
}
.maplocation .details {
    /**/ display:none; /**/
    background:#FFFFFF;
    border:#C8C9Cb 1px solid;
    width:200px;
    z-index:100;
    position:relative;
    padding:5px 3px;
    border-radius: 5px;
}
.maplocation .photo,
.maplocation .url,
.maplocation p,
.maplocation .location {
    display:block;
}
#locationa{top:85px; left:205px;}
#locationb{top:195px; left:130px;}
#locationc{top:250px; left:310px;}
#locationd{top:192px; left:190px;}
#locatione{top:205px; left:848px;}
#locationf{top:217px; left:773px;}
#locationg{top:237px; left:770px;}
#locationh{top:249px; left:794px;}
#locationi{top:273px; left:743px;}
#locationj{top:300px; left:740px;}



#map li {background:red;}

fiddle.html

<div id="map">
    <ul>
        <li id="locationa" class="maplocation">
            <div class="details vcard">
                <img class="photo" src="http://tfspsdemo/sites/advicsinternetdev/SiteAssets/career_btn.png" alt="Location Picture" />
                <a class="fn org url" href="#">Location  Name</a>
                <p>Here is some location description like phone number:
                   <a class="tel" href="tel:1-800-123-4567">1-800-123-456</a>
                   and address:
                   <span class="location">
                       <span class="street-address">123 Fake Lane</span><br/>
                       <span class="locality">Columbus</span>,
                       <abbr class="region" title="Ohio">OH</abbr>
                       <span class="postal-code">90210</span>
                   </span>
                   and other stuff like that.</p>
            </div>
        </li>
        <li id="locationb" class="maplocation">
            <div class="details vcard">
                <img class="photo" src="http://tfspsdemo/sites/advicsinternetdev/SiteAssets/career_btn.png" alt="Location Picture" />
                <a class="fn org url" href="#">Location  Name</a>
                <p>Here is some location description like phone number:
                   <a class="tel" href="tel:1-800-123-4567">1-800-123-456</a>
                   and address:
                   <span class="location">
                       <span class="street-address">123 Fake Lane</span><br/>
                       <span class="locality">Columbus</span>,
                       <abbr class="region" title="Ohio">OH</abbr>
                       <span class="postal-code">90210</span>
                   </span>
                   and other stuff like that.</p>
            </div>
        </li>
        <li id="locationc" class="maplocation">
            <div class="details vcard">
                <img class="photo" src="http://tfspsdemo/sites/advicsinternetdev/SiteAssets/career_btn.png" alt="Location Picture" />
                <a class="fn org url" href="#">Location  Name</a>
                <p>Here is some location description like phone number:
                   <a class="tel" href="tel:1-800-123-4567">1-800-123-456</a>
                   and address:
                   <span class="location">
                       <span class="street-address">123 Fake Lane</span><br/>
                       <span class="locality">Columbus</span>,
                       <abbr class="region" title="Ohio">OH</abbr>
                       <span class="postal-code">90210</span>
                   </span>
                   and other stuff like that.</p>
            </div>
        </li>
    </ul>
</div>

fiddle.js

$("#map li.maplocation").click(function(){
    $(this).find(".details").toggle("slow");
    //testing jsfiddle
});

fiddle.manifest

name: Map Tooltips
description: Quick demo of doing popups with map pin points
authors:
  - Jason Karns
normalize_css: yes