Posts

Showing posts from April 25, 2011

How to create a tooltips with jQuery

< html > < head >   < script type = "text/javascript" src = "jquery-1.4.2.min.js" >< / script >   < style type = "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 >   < label id = "username" > Username : < / label >< input type = "text" / size = "50" > < span id = "hint" > hint (mouseover me) < / span >   < script type = "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) {