Simple Tooltip - Jquery

How can i make a simple tooltip using jquery code?

Snippet Code

Rate this page :
  [ 0 votes]

The following jquery code can be used to make a simple tooltip.

<script type="text/javascript" src='./jquery.js'></script> <style> .tooltip { display:none; position:absolute; border:1px solid #333; background-color:#161616; border-radius:5px; padding:10px; color:#fff; font-size:12px Arial; } </style> <script type="text/javascript"> $(document).ready(function() { // Tooltip only Text $('.mtooltip').hover(function(){ // Hover over code var title = $(this).attr('title'); $(this).data('tipText', title).removeAttr('title'); $('<p class="tooltip"></p>') .text(title) .appendTo('body') .fadeIn('slow'); }, function() { // Hover out code $(this).attr('title', $(this).data('tipText')); $('.tooltip').remove(); }).mousemove(function(e) { var mousex = e.pageX + 20; //Get X coordinates var mousey = e.pageY + 10; //Get Y coordinates $('.tooltip') .css({ top: mousey, left: mousex }) }); }); </script> <p title="Jquery Tooltip." class="mtooltip" style='width:130px;'>Mouse Over.</p> Note: You need jquery.js file for run this file


Ask Questions

Ask Question