Tooltip not shown if Ajax

JavaScript
1

Hi,

I have implemented a site where I made a tooltip, show when mouseover an item. here is the site http://amerimav.com/amerimav/rashidul/googlebd

The problem is data got from a remote server using ajax. I perform jQuery .hover() on the content got through Ajax. not use .live(). So Now the situation is in IE tooltip shown but in FF and Safari tooltip is not shown.

Here is the js code and make the Ajax call…this is index.php

<!-- Get the browser height and width and make an ajax call -->
		<script type="text/javascript">
		$(document).ready(function(){
			var bHeight = $(window).height();
			var bWidth = $(window).width();
			$.post("index2.php", { width: bWidth, height: bHeight },
		   		function(data){
		     		//alert("Data Loaded: " + data);
		     		$("#content").html(data);
		   		});
		});
		</script>

Here is the main PHP code where using CSS and JS hover implemented.

$html .= '<a target="_blank" href="'.$arrBld["itemLink"].'"><div class = "title_div" '.$styletext.'>';
				$html .= $arrBld['itemTitle'];
				$html .= '<span class="tooltips"><span class="tooltipsIn"><span class="tooltipsInner">';
				$html .= $arrBld['itemDesc'];
				$html .= '<br />'.$arrBld['sourceTitle'];
				$html .= '</span></span></span>';
				$html .= '</div></a>'

Here is the jQuery code:

$('.tooltips').parent().hover(function(){

Full JS file is here http://amerimav.com/amerimav/rashidul/googlebd/themes/js/script.js

2

If it’s loading in one browser but not the other, it may be your CSS and not the javascript (especially sense you are using jquery).

Can you strip out the CSS and just fire off the event to see if it at least loads?