Tooltip

First, add the following CSS to those pages that use the rich tooltips:

.skmTooltipHost
{
 cursor: help;
 border-bottom: dotted 1px brown;
}

.skmTooltipContainer
{
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    display: none;
    position: absolute;
    background-color: #ff9;
    border: solid 1px #333;
    z-index: 999;
}

Next, add the following function to your page

<script type="text/javascript">
  $(document).ready(function() {
     $(".skmTooltipHost").hover(
       function() {
       $(this).append('<div class="skmTooltipContainer">' + $(this).attr('tooltip') + '</div>');
  
       $(this).find('.skmTooltipContainer').css("left", $(this).position().left + 20);
       $(this).find('.skmTooltipContainer').css("top", $(this).position().top + $(this).height());
        $(".skmTooltipContainer").fadeIn(500);
      },
 
       function() {
        $(".skmTooltipContainer").fadeTo(500, 1.0, function() { $(this).remove(); });
       }
     );
  });
</script>

Finally copy the lines

<p>
   This example shows how to use jQuery and a touch of CSS to display rich 
   <span class="skmTooltipHost" tooltip="Dictionary.com defines &lt;a href=&quot;http://dictionary.reference.com/browse/tooltip&quot;&gt;tooltip&lt;/a&gt; as, &quot;a small rectangular pop-up window that displays a brief description of a toolbar button when a computer mouse lands on that button.&quot;">tooltips</span> 
   when hovering over an HTML element.
  </p>