jquery tooltip with internet explorer

Hi, i am using the jquery tooltip to display an image when the mouse pointer is over a particular image to describe what it is.
The image is a row in a gridview so it has multiple images.It is working fine in all over browsers except internet explorer  8 which displays the tooltip on the first row of images but not on any of the following ones.
Is there a fix for this.please help
chrispatonAsked:
Who is Participating?
 
Gurvinder Pal SinghConnect With a Mentor Commented:
i tried this simple example, it worked for me

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<script type="text/javascript" src="jquery-1.js"></script>

		<script type="text/javascript">
			$(document).ready(function() {
				$("#ImageKeys img").hover(
					function(){
					   $("#tip").addClass("tooltip");
					   $("#tip").css("top", $(this).offset().top + 100);
					   $("#tip").css("left", $(this).offset().left);
					   $("#tip").html($(this).attr("id"));
					},
					function(){
					   $("#tip").removeClass("tooltip");
					   $("#tip").html("");
					}); 
			});
		</script>
		<style>
			.tooltip 
			{
				position:absolute;
				background:transparent url(21022009.jpg);
				font-size:12px;
				height:58px;
				width:100px;
				padding:1px;
				color:#fff;
			}
			#ImageKeys img
			{
				border:0;
				cursor:pointer;
				margin:0 8px;
				width:50px;
				height:50px;
			}
		</style>
	</HEAD>

	<BODY BGCOLOR="#FFFFFF">
		<div id="ImageKeys">
			<img ID="SleepsImage" src='18072010.jpg'/>
			<img ID="PetsImage" src='18072010.jpg'/>
			<img ID="PoolImage" src='18072010.jpg'/>
			<img ID="WheelChairImage" src='18072010.jpg'/>
			<img ID="SkiImage" src='18072010.jpg'/>
			<img ID="QualityRatingImage" src='18072010.jpg'/>
		</div>

		<div id="tip"\>
	</BODY>
</HTML>

Open in new window

0
 
Gurvinder Pal SinghCommented:
please share the code, so that i can see the problem.

0
 
chrispatonAuthor Commented:
Within my gridview i have the images

<div id="ImageKeys">
<asp:Image ID="SleepsImage" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "SleepsImage", "/images/results/{0}") %>' ToolTip="Sleeps image" onerror="this.style.display='none'"/>
<asp:Image ID="PetsImage" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "PetsImage", "/images/results/{0}") %>' ToolTip="Pets image" onerror="this.style.display='none'" />
<asp:Image ID="PoolImage" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "PoolImage", "/images/results/{0}") %>' ToolTip="Pool image" onerror="this.style.display='none'" />
<asp:Image ID="WheelChairImage" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "WheelChairImage", "/images/results/{0}") %>' ToolTip="Wheelchair image" onerror="this.style.display='none'" />
<asp:Image ID="SkiImage" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "SkiImage", "/images/results/{0}") %>' ToolTip="Ski image" onerror="this.style.display='none'" />
<asp:Image ID="QualityRatingImage" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "QualityRatingImage", "/images/results/{0}") %>' ToolTip="QualityRating image" onerror="this.style.display='none'" />
</div>
and then the javascript function at the bottom of the page to call the id of the <div>

<script type="text/javascript">
$(document).ready(function() {
$("#ImageKeys img[title]").tooltip();
});
</script>
This is the css
 .tooltip {
display:none;
background:transparent url(../images/black_arrow.gif);
font-size:12px;
height:58px;
width:100px;
padding:1px;
color:#fff;
}
#ImageKeys img
{
border:0;
cursor:pointer;
margin:0 8px;
}
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Gurvinder Pal SinghCommented:
what about
$("#ImageKeys img[title]").hover(
function(){
   $(this).addClass("tooltip");
},
function(){
   $(this).removeClass("tooltip");
});

0
 
chrispatonAuthor Commented:
no it still only displays the first row of images in the gridview with the tooltip but after that it's missing and only has the default tooltip
0
 
Gurvinder Pal SinghCommented:
just try changing it to

$("#ImageKeys img").hover(
function(){
   $(this).addClass("tooltip");
},
function(){
   $(this).removeClass("tooltip");
});

0
 
chrispatonAuthor Commented:
sorry gurvinder372 still not working.it works fine in all over browsers, ie opera firefox safari.just not in internet explorer
 
0
 
Gurvinder Pal SinghCommented:
can i get the link to your page so that i can see it there?
0
 
chrispatonAuthor Commented:
sorry i can't give you a link it's running on an intranet.
0
 
Gurvinder Pal SinghCommented:
@chrispaton: did this example worked for you? please let me know the same
0
 
chrispatonAuthor Commented:
No it seemed to be working the opposite way.I mean when the mouse pointer hovered over the image it jumped and looks like it was collapsing instead of displaying an image.i cant understand why it works the way i have it only not for explorer.thanks
0
 
Gurvinder Pal SinghCommented:
which browser did you tested on?
0
 
chrispatonAuthor Commented:
explorer and firefox
0
 
Gurvinder Pal SinghCommented:
i tested my example on IE8, Safari4, Chrome6, and FF2

Not sure why it is not working for you.

Also you mentioned that it only doesn't work for explorer. Can you confirm that i worked on firefox?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.