jQuery tooltip help :S

[Porsche_maniak]

Hi !
I am currently using jquery tooltip to replace the ordinary title attributes and it is quite well,but there is only one problem : tooltips do not update in time..

Lets say i have : <img src=balba.jpg title='not clicked' onclick=this.title='clicked'> ..

Simply when user clicks the image the tooltip does not change to 'clicked' and stays 'not clicked'

Anyone can give me a script ?


Here's my current one :

/**
*
*	simpleTooltip jQuery plugin, by Marius ILIE
*	visit http://dev.mariusilie.net for details
*
**/
(function($){ $.fn.simpletooltip = function(){
	return this.each(function() {
		var text = $(this).attr("title");
		$(this).attr("title", "");
		if(text != undefined) {
			$(this).hover(function(e){
				var tipX = e.pageX + 12;
				var tipY = e.pageY + 12;
				$(this).attr("title", ""); 
				$("body").append("<div id='simpleTooltip' style='position: absolute; z-index: 100; display: block;'>" + text + "</div>");
				if($.browser.msie) var tipWidth = $("#simpleTooltip").outerWidth(true)
				else var tipWidth = $("#simpleTooltip").width()
				$("#simpleTooltip").width(tipWidth);
				$("#simpleTooltip").css("left", tipX).css("top", tipY).fadeTo("fast", 0.80);
			}, function(){
				$("#simpleTooltip").remove();
				$(this).attr("title", text);
			});
			$(this).mousemove(function(e){
				var tipX = e.pageX + 12;
				var tipY = e.pageY + 12;
				var tipWidth = $("#simpleTooltip").outerWidth(true);
				var tipHeight = $("#simpleTooltip").outerHeight(true);
				if(tipX + tipWidth > $(window).scrollLeft() + $(window).width()) tipX = e.pageX - tipWidth;
				if($(window).height()+$(window).scrollTop() < tipY + tipHeight) tipY = e.pageY - tipHeight;
				$("#simpleTooltip").css("left", tipX).css("top", tipY).fadeTo("fast", 0.80);
			});
		}
	});
}})(jQuery);

Porsche_maniak Reviewed by Porsche_maniak on 17th Oct 2010. jQuery tooltip help :S Hi ! I am currently using jquery tooltip to replace the ordinary title attributes and it is quite well,but there is only one problem : tooltips do not update in time.. Lets say i have : <img src=balba.jpg title='not clicked' onclick=this.title='clicked'> .. Simply when user clicks the image the tooltip does not change to 'clicked' and stays 'not clicked' :S Anyone can give me a script ? Rating: 5

[Jueki]

try onclick="this.title='clicked'"

[Porsche_maniak]

tnx Jueki but it is not about that..

[Jueki]

I don't understand what exactly you mean then :/ sorry.

[Porsche_maniak]

anyone can help ?

[th3fallen]

i notice that your jquery doesnt load from document ready, that could the problem but i usually try to stay away from onclick actions for tool tips

what i would do is something like this...

$(document).ready(function() {     //Tooltips     $(".tip_trigger").hover(function(){         tip = $(this).find('.tip');         tip.show(); //Show tooltip     }, function() {         tip.hide(); //Hide tooltip     }).mousemove(function(e) {         var mousex = e.pageX   20; //Get X coodrinates         var mousey = e.pageY   20; //Get Y coordinates         var tipWidth = tip.width(); //Find width of tooltip         var tipHeight = tip.height(); //Find height of tooltip          //Distance of element from the right edge of viewport         var tipVisX = $(window).width() - (mousex   tipWidth);         //Distance of element from the bottom of viewport         var tipVisY = $(window).height() - (mousey   tipHeight);          if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport             mousex = e.pageX - tipWidth - 20;         } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport             mousey = e.pageY - tipHeight - 20;         }         //Absolute position the tooltip according to mouse position         tip.css({  top: mousey, left: mousex });     }); });

Make sure your calling the jquery library from an external source as well that helps alot with your bandwith i usually use this

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

then you need to style them i just threw an easy black example css for the box

.tip {     color: #fff;     background:#1d1d1d;     display:none; /*--Hides by default--*/     padding:10px;     position:absolute;    z-index:1000;     -webkit-border-radius: 3px;     -moz-border-radius: 3px;     border-radius: 3px; }

Then for your link you would want to do this

<a href="#" class="tip_trigger">Your Link Key Word <span class="tip">This will show up in the tooltip</span></a>