Solved

jquery tooltip with internet explorer

Posted on 2010-09-21
15
635 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:gurvinder372
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:gurvinder372
ID: 33724174
what about
$("#ImageKeys img[title]").hover(
function(){
   $(this).addClass("tooltip");
},
function(){
   $(this).removeClass("tooltip");
});

0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

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:gurvinder372
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:gurvinder372
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:
gurvinder372 earned 500 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:gurvinder372
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:gurvinder372
ID: 33732786
which browser did you tested on?
0
 

Author Comment

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

Expert Comment

by:gurvinder372
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn how to dynamically set the form action using jQuery.
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…

813 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now