Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jquery tooltip with internet explorer

Posted on 2010-09-21
15
Medium Priority
?
652 Views
Last Modified: 2012-05-10
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
0
Comment
Question by:chrispaton
  • 8
  • 6
15 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33724023
please share the code, so that i can see the problem.

0
 

Author Comment

by:chrispaton
ID: 33724131
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
 
LVL 40

Expert Comment

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

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:chrispaton
ID: 33724235
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33724258
just try changing it to

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

0
 

Author Comment

by:chrispaton
ID: 33724306
sorry gurvinder372 still not working.it works fine in all over browsers, ie opera firefox safari.just not in internet explorer
 
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33724320
can i get the link to your page so that i can see it there?
0
 

Author Comment

by:chrispaton
ID: 33724371
sorry i can't give you a link it's running on an intranet.
0
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 2000 total points
ID: 33724554
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33732338
@chrispaton: did this example worked for you? please let me know the same
0
 

Author Comment

by:chrispaton
ID: 33732605
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33732786
which browser did you tested on?
0
 

Author Comment

by:chrispaton
ID: 33732790
explorer and firefox
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33732868
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

972 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question