Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

jquery tooltip with internet explorer

Posted on 2010-09-21
15
Medium Priority
?
649 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: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
Understanding Linux Permissions

Linux for beginners: How to view the permissions associated with files and directories and also how you can change them.

 

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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses

705 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