[Solved] old tooltips coming back

[jgrauer]

Hi,

I have a few images, that when people move over are suppose to provide additional detail.

So everything is working great, all the data is displaying as I'd like it too, however... old tooltips keep coming back.

So lefts say I mouseover image #1 and it says "Hello" in a tooltip.

Then I go mouseover image #2, I get a new tooltip with "hello image 2", however, in the background, I see the old toolip from image #1.

Then when I go to image #3, the tooltips from #1, #2 and #3 appear.

when I mouseout, everything is disappearing.. they aren't getting stuck.[/b]

HTML

JS Code

echo "<td width='7%' class='progress' rowspan='2'><img src='/includes/img/progress/".$progress_image."' style='width: 45px; height: 45px' o<strong></strong>nmouseover='showProgress(\"".$ilist."\")' /></td>";

JAVA

JS Code

function showProgress(where){
 
		$('.progress').qtip({
			content: {
				url: '/includes/php/ajax.php',
				data: {call:'progression',where:where},
				method: 'post'	
			},
			show: 'mouseover',
			hide: 'mouseout',
			style: {
				name: 'dark',
				background: '#191F23',
				border: {
					width: 1,
					radius: 3,
					color: '#FFF'
				}
			},
			position: {
      			corner: {
         			target: 'topRight',
        			tooltip: 'bottomLeft'
		        }
		    }
		});
 
}

[Craig]

Try putting only the list ID in an attribute when you echo:

PHP Code

echo "<td width='7%' class='progress' rowspan='2'><img src='/includes/img/progress/".$progress_image."' style='width: 45px; height: 45px' rel='".$ilist."'/></td>";

Then grabbing it using an each loop:

JS Code

$('.progress').qtip({
      $(this).qtip({
         content: {
            url: '/includes/php/ajax.php',
            data: {
                 call: 'progression',
                 where: $('img', this).attr('rel')
            },
            method: 'post'   
         },
         show: 'mouseover',
         hide: 'mouseout',
         style: {
            name: 'dark',
            background: '#191F23',
            border: {
               width: 1,
               radius: 3,
               color: '#FFF'
            }
         },
         position: {
               corner: {
                  target: 'topRight',
                 tooltip: 'bottomLeft'
              }
          }
      });
});

[jgrauer]

I'm gtting a line error on line 5... and I can't seem to see where the error could be.

All the quotes, commas, brackers are all correct it seems, but it's not accepting it..

it seems there it s a problem with

JS Code

$('.progress').qtip({
			$(this).qtip({
 
....
 
});
 
});

(26th June 12:28)Craig Wrote:  Try putting only the list ID in an attribute when you echo:

PHP Code

echo "<td width='7%' class='progress' rowspan='2'><img src='/includes/img/progress/".$progress_image."' style='width: 45px; height: 45px' rel='".$ilist."'/></td>";

Then grabbing it using an each loop:

JS Code

$('.progress').qtip({
      $(this).qtip({
         content: {
            url: '/includes/php/ajax.php',
            data: {
                 call: 'progression',
                 where: $('img', this).attr('rel')
            },
            method: 'post'   
         },
         show: 'mouseover',
         hide: 'mouseout',
         style: {
            name: 'dark',
            background: '#191F23',
            border: {
               width: 1,
               radius: 3,
               color: '#FFF'
            }
         },
         position: {
               corner: {
                  target: 'topRight',
                 tooltip: 'bottomLeft'
              }
          }
      });
});

[Craig]

Woops that first one should be an .each(function(){ not a .qtip({

JS Code

$('.progress').each(function(){
         $(this).qtip({

[jgrauer]

works great.. thank you very much