I have my function like this in jquery
$(document).ready(function(){
// set the map-wrapper width and height to match the img size
$('#map-wrapper').css({'width':$('#map-wrapper img').width(),
'height':$('#map-wrapper img').height()
})
for (i=0; i<$(".pin").length; i++)
{
// store initial tooltips contents within an array
var tooltipContent = new Array();
tooltipContent[i] = $(".pin").eq(i).html();
// set tooltip direction type - up or down
var tooltipDirection = 'tooltip-up';
if ($(".pin").eq(i).hasClass('pin-down'))
{
tooltipDirection = 'tooltip-down';
}
// append the tooltip
$("#map-wrapper").append("<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top:"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>\
<div class='tooltip'>" + tooltipContent[i] + "</div>\
</div>");
}
// show/hide the tooltip
$('.tooltip-up, .tooltip-down').mouseenter(function(){
$(this).children('.tooltip').fadeIn(100);
}).mouseleave(function(){
$(this).children('.tooltip').fadeOut(100);
})
});
But i am unable to use it in Drupal 7 . So what changes do i need to make for it.