Solved

ajax funtion breaking a tooltip

Posted on 2009-07-07
2
372 Views
Last Modified: 2012-08-13
Dear all,


I'm using jquery-tooltip to add a tooltip to content generated by a $.ajax  and here's the result:
http://www.vivocomtech.net/vidzapper/jquery-tooltip/tipmix2.htm

As you'll see the only image that has got the tooltip is the one in the centre.. and I need all of them.

With     $('#content img').tooltip({
I now the programming is looking into the images of the content div, but I'm so desperate that I've added title="'+alt+'" everywhere .. and even so, it is not working ..please help!!


The usage of  jquery-tooltip:
http://jquery.bassistance.de/tooltip/demo/

And my code is below.

Thanks a million!

<link rel="stylesheet" href="http://www.vivocomtech.net/vidzapper/jquery-tooltip/lib/jquery.tooltip.css" />

<link rel="stylesheet" href="http://www.vivocomtech.net/vidzapper/jquery-tooltip/lib/screen.css" />

<script src="http://www.vivocomtech.net/vidzapper/jquery-tooltip/lib/jquery.js" type="text/javascript"></script>

<script src="http://www.vivocomtech.net/vidzapper/jquery-tooltip/lib/jquery.bgiframe.js" type="text/javascript"></script>

<script src="http://www.vivocomtech.net/vidzapper/jquery-tooltip/lib/jquery.dimensions.js" type="text/javascript"></script>

<script src="http://www.vivocomtech.net/vidzapper/jquery-tooltip/lib/jquery.tooltip.js" type="text/javascript"></script>
 
 

<script type="text/javascript">

     

     	$(document).ready(function(){

     	

			$.ajax({

				type: "GET",

				url: "myxml.xml",

				dataType: "xml",

				success: function(xml) {

				

   					$(xml).find('item').each(function(){

   					
 

						var number = $(this).find('number').text();

						var alt = $(this).find('alt').text();

						var ids = $(this).find('ids').text();

						var thumb = $(this).find('thumb').text();
 
 

      	        

      

        $('#content img').tooltip({

      	track: true,

      	delay: 0,

      	showURL: false,

      	showBody: " - ",

      	fade: 250

      })

      
 
 

			 	$('<div id="thumb'+number+'" title="'+alt+'"></div>').html('<a target="_parent"  title="'+alt+'" href="http://www.amazon.com/

music-rock-classical-pop-jazz/b?ie=UTF8&node='+ids+'"><img title="'+alt+'" src="http://player27.narrowstep.tv/assets/players/4351/xml/images/'+thumb+'.jpg"  width=82 height=62 border=0></a>').appendTo('#content');

		

					});

				}

			});
 

		});

		
 
 

</script>
 

</head>

<body>
 

	<div id="content">
 

     </div>
 

////// xml file //////////////////////
 

<?xml version="1.0" encoding="iso-8859-1"?>

<myxml>

 

   <item>

  

        <thumb>thumb1</thumb>

        <ids>5171</ids>

        <alt>Some text 1</alt>

        <number>1</number>

    </item>

   

   

    <item>

      

        <thumb>thumb2</thumb>

        <ids>5172</ids>

        <alt>Some text 2</alt>

         <number>2</number>

     </item>

   

   

  

   

      <item>

 

        <thumb>thumb3</thumb>

        <ids>5173</ids>

        <alt>Some text 3</alt>

         <number>3</number>

      </item>

 

</myxml>

Open in new window

0
Comment
Question by:Dada44
2 Comments
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 500 total points
ID: 24793975
Append all your items to the content first, then apply the tooltips.
<script type="text/javascript">

$(document).ready(function(){

	$.ajax({

		type: "GET",

		url: "myxml.xml",

		dataType: "xml",

		success: function(xml) {

			$(xml).find('item').each(function() {

				var number = $(this).find('number').text();

				var alt = $(this).find('alt').text();

				var ids = $(this).find('ids').text();

				var thumb = $(this).find('thumb').text();
 

				$('<div id="thumb'+number+'" title="'+alt+'"></div>').html('<a target="_parent"  title="'+alt+'" href="http://www.amazon.com/music-rock-classical-pop-jazz/b?ie=UTF8&node='+ids+'"><img title="'+alt+'" src="http://player27.narrowstep.tv/assets/players/4351/xml/images/'+thumb+'.jpg"  width=82 height=62 border=0></a>').appendTo('#content');

			});
 

			$('#content img').tooltip({

				track: true,

				delay: 0,

				showURL: false,

				showBody: " - ",

				fade: 250

			});

		}

	});

});

</script>

Open in new window

0
 

Author Closing Comment

by:Dada44
ID: 31600568
Thanks!!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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…

747 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

11 Experts available now in Live!

Get 1:1 Help Now