图像地图中的纯CSS数据工具提示(jquery?）

我想使用纯CSS工具提示（数据工具提示），如http://www.frequency-decoder.com/demo/css-tooltips/所示。我想在图像地图上使用它的矩形区域形状。我需要一个简单的脚本来连接"纯CSS工具提示（数据工具提示）"和图像地图区域形状。我已经在下面找到了JavaScript，它很有效，但我无法将它连接到纯CSS工具提示（数据工具提示）。

  <style type="text/css">
    body
    {
    background-image: url(background.gif);
    text-align:center;
    font-size:14px;
    line-height:1.4;
    font-weight:normal;
    font-family:cambria,georgia,times,serif
    }
    /* Make tooltip "links" have a different pointer (as the tooltip uses the "help" cursor        by      default) */      
    [data-tooltip]
    {
    cursor:pointer !important;
    }
    /* Styles for elements having a data-tooltip attribute - using the star selector is   processor intensive
    so you may wish to change this to list a known, limited set of tags instead */
    *[data-tooltip]
    {
    /* Relativly position the tooltip to enable us to position:absolute 
       the generated content */
    position:relative;        
    /* Links inherit the !important cursor rule from above */
    cursor:help;
    /* Moz requires the text-decoration here (as it won't allow the use of
      text-decoration:none on generated content) which is why I use the bottom 
      border to display a more accessible underline */
    text-decoration:none;   
    border-bottom:1px dotted #aaa; 
    /* Remove the styles for IE7 and below - could be passed using conditional comments */
    *text-decoration:inherit;   
    *border-bottom-width:inherit;
    *border-bottom-style:inherit;        
    *cursor:inherit;
    *position:inherit;            
    }
    /* Default :before & :after values */     
    *[data-tooltip]:after,
    *[data-tooltip]:before
    {
    content:"";
    /* Don't show tooltip by default */
    opacity:0;  
    /* Set a high z-index */
    z-index:999;
    /* Animations won't (yet) work on pseudo elements - shame really as this should fade the tooltip in 
       after one second - but I'll leave the rules for posterity */
    -moz-transition-property: opacity;
    -moz-transition-duration: 2s;
    -moz-transition-delay: 1s;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 2s;
    -webkit-transition-delay: 1s;
    -o-transition-property: opacity;
    -o-transition-duration: 2s;
    -o-transition-delay: 1s;
    transition-property: opacity;
    transition-duration: 2s;
    transition-delay: 1s;  
    /* -moz won't understand the text-decoration here but inherits the parent value of "none" successfully */
    text-decoration:none !important;
    outline:none;
    }
   /* Tooltip arrow - shown on hover or focus */
   *[data-tooltip]:hover:before,
   *[data-tooltip]:focus:before
    {
    /* Slightly opaque arrow */
    opacity:0.94;
    outline:none;
    content:"";  
    display:block;        
    position:absolute;
    top:20px;
    left:50%;
    margin:0 0 0 -5px;
    width:0;
    height:0;
    line-height:0px; 
    font-size:0px;       
    /* This sets the tooptip pointer color */
    border-bottom:5px solid #33acfc;
    border-left:5px solid transparent;
    border-right:5px solid transparent;        
    border-top:transparent;
    /* Border gradient */        
    -webkit-border-image:-webkit-gradient(linear, left top, left bottom, from(#33ccff), to(#33acfc));                        
    }
   /* Tooltip body - shown on hover or focus */
   *[data-tooltip]:hover:after,
   *[data-tooltip]:focus:after
    {
    /* Slightly opaque tooltip */
    opacity:0.94;
    /* Set display to block (or inline-block) */
    display:block;
    /* Use the data-tooltip attribute to set the content*/
    content:attr(data-tooltip);
    /* Position the tooltip body under the arrow and in the middle of the text */
    position:absolute;
    top:25px;
    left:50%;
    margin:0 0 0 -150px;
    /* Set the width */
    width:290px;
    /* Pad */
    padding:5px;
    /* Style the tooltip */
    line-height:18px;
    /* min-height */
    min-height:18px; 
    /* Set font styles */  
    color:#fcfcfc;
    font-size:16px;        
    font-weight:normal;
    font-family:helvetica neue, calibri, verdana, arial, sans-serif;
    /* Fallback background color */
    background:#3198dd; 
    text-align:center;        
    outline:none;        
    /* Moz doesn't recognise the following... */
    text-decoration:none !important;                  
    /* Background gradient */        
    background:-webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
    background:-moz-linear-gradient(top,#33acfc,#3198dd);         
    /* Round the corners */
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;        
    /* Add a drop shadow */
    -moz-box-shadow:2px 2px 4px #ccc;
    -webkit-box-shadow:2px 2px 4px #ccc;
    box-shadow:2px 2px 4px #ccc;        
    /* Add a Text shadow */
    text-shadow:#2187c8 0 1px 0px; 
    }  
    </style>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
    <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $('.1,.2,.3').css({
    position: 'absolute'
    }).hide()
    $('area').each(function(i) {
    $('area').eq(i).bind('mouseover mousemove', function(e) {
        $('.1,.2,.3').eq(i).css({
            top: e.pageY+10,
            left: e.pageX+10
        }).show()
    })
    $('area').eq(i).bind('mouseout', function() {
        $('.1,.2,.3').hide()
    })
    })
    });//]]></script>
    <body>
    <div align="center"><img src="http://www.hoteljijona.com/cover/cover_NL.jpg" width="794" height="1075" border="0" usemap="#Map" />
    <map name="Map" id="Map">
    <!-- Fixed language parts -->
    <area shape="rect" coords="571,165,603,185" href="index-ca.html" target="_parent" title="this is the text that has to be shown by the Pure CSS data-tooltip"/>
    <div class="1">
    <label>Here it should show the Pure CSS Tooltip</label>
    </div>

我希望在还剩5分钟的时候有个天才能解决我的问题。我愿意把我的助手的信息放在我试图构建的页面的html脚本中。