title: Tooltip using Prototype.js
body: <p>It seems so hard to find a easy to use tooltip for Prototype library. The ones that are out there are so bloated.</p>
  
  <p>What I am looking for is something as simple as this.</p>
  
  <pre><code>&lt;a class="tooltip"&gt;This is my sentence&lt;span&gt;Tooltip is here&lt;/span&gt; that ends in sorrow.&lt;/a&gt; &lt;a class="tooltip"&gt;How can I make this happen &lt;span&gt;like how?&lt;/span&gt; without killing people.&lt;/a&gt;
  </code></pre>
  
  <p>I have a CSS solution but the problem is once the tooltip is near edge of browser, it goes off the edge. I like it to be smart and not go off the edge of browser window.</p>
  
  <p>Anyways? I was thinking of using Prototype to find the x-y coordinates of pop-up and move it. but how to do it?</p>
  
  <p>This is what I am using for CSS</p>
  
  <pre><code>.date_info a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
  .date_info a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:200px;}
  .date_info a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #555; color:#6c6c6c;}
  </code></pre>