title: Pure CSS data-tooltip in image map (jquery?)
body: <p>I´d like to use the Pure CSS Tooltips (data-tooltip), shown on <code>http://www.frequency-decoder.com/demo/css-tooltips/</code>. I want to use it on an image map rectangular area shape. I need a simple script to connect the "Pure CSS Tooltips (data-tooltip)", and the image map area shape. I already found the JavaScript below, and it works, but I can´t get it connected to the Pure CSS Tooltips (data-tooltip).</p>
  
  <pre><code>  &lt;style type="text/css"&gt;
      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 &amp; :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; 
      }  
      &lt;/style&gt;
      &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'&gt;&lt;/script&gt;
      &lt;script type='text/javascript'&gt;//&lt;![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()
      })
      })
      });//]]&gt;&lt;/script&gt;
      &lt;body&gt;
      &lt;div align="center"&gt;&lt;img src="http://www.hoteljijona.com/cover/cover_NL.jpg" width="794" height="1075" border="0" usemap="#Map" /&gt;
      &lt;map name="Map" id="Map"&gt;
      &lt;!-- Fixed language parts --&gt;
      &lt;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"/&gt;
      &lt;div class="1"&gt;
      &lt;label&gt;Here it should show the Pure CSS Tooltip&lt;/label&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I hope some genious with 5 minutes left solves my problem. I am willing to put my helper´s info in the html script of the pages I´m trying to build.</p>