Customize ToolTip popup using jQuery and CSS


Customize Tool Tip popup using jquery and css on the fly is so easy


<script type="text/javascript">
$(document).ready(function() {
   $('.toolTip').live('mouseover', function(e) {
       var tip = $(this).attr('title');
       $(this).attr('title','');
       $(this).append(
          '<div id="tooltip"><div></div><div><ul id="cont">'
          + tip + '</ul></div><div></div></div>'
        );
      $('#tooltip').fadeIn('500');
      $('#tooltip').fadeTo('10',1);
   }).live('mousemove',function(e) {
        $('#tooltip').css('top', e.pageY + 10 );
        $('#tooltip').css('left', e.pageX + 20 );
   }).live('mouseout',function() {
        $(this).attr('title',$('#cont').html());
        $(this).children('div#tooltip').remove();
   });
});
</script>

<style type="text/css">
  #tooltip {
    position:absolute;
    z-index:100;
    color:#fff;
    font-size:13px;
    min-width:180px;
    width: auto;
    margin-left: -220px;
    margin-top: -100px;
  }
  #tooltip .tipHeader {
    height:18px;
    background-color: #226F9D;
  }
  #tooltip .tipBody {
    background-color:#226F9D;
    padding:5px 15px 5px 15px;
  }
  #tooltip .tipFooter {
    height:18px;
    background-color: #226F9D;
  }
</style>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s