Solved

jquery tooltip with internet explorer

Posted on 2010-09-21
15
641 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

 

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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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 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…

751 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