Posts

Showing posts from April 25, 2011

How to create a tooltips with jQuery

<html><head><scripttype="text/javascript"src="jquery-1.4.2.min.js"></script><styletype="text/css"> #hint{ cursor:pointer; } .tooltip{ margin:8px; padding:8px; border:1px solid blue; background-color:yellow; position: absolute; z-index: 2; } </style></head><body><h1>jQuery tooltips example</h1><labelid="username">Username : </label><inputtype="text"/size="50"><spanid="hint">hint (mouseover me)</span><scripttype="text/javascript">   $(document).ready(function() {   var changeTooltipPosition = function(event) { var tooltipX = event.pageX - 8; var tooltipY = event.pageY + 8; $('div.tooltip').css({top: tooltipY, left: tooltipX}); };   var showTooltip = function(event) { $('div.tooltip').remove(); $('<divclass="tooltip">I\' am tooltips! toolti…