Tooltip

Door Niels van K op 13-11-2008 23:11

1.104 views

Hoi,

Ik heb het volgende scriptje gevonden:

http://devirtu.com/2008/09/22/jquery-making-tooltip/

Nou heb ik dit een beetje verbouwd, want ik heb links op de betreffende website waar de title niks is (title=""). Dus dan krijg ik gewoon een tooltip blokje met niks erin (klein vierkantje), ik gebruik het volgende script:


jQuery("a").bind("mouseover", function( event ) {
	if (this.title == "") {
	this.newtitle = "";
	document.getElementById("hintcontainer").style.display = "none";
	} else
this.newtitle = this.title;
this.title = "";
	jQuery("#hintcontainer").text(this.newtitle);
	jQuery("#hintcontainer").css({display:"block",left:event.pageX+"px", top:event.pageY+25+"px"}).fadeTo(200, 0.8);
}).bind("mouseout", function( event ) {
	jQuery("#hintcontainer").fadeTo(200, 0.0);
}).bind("mousemove", function( event ) {
	jQuery("#hintcontainer").css({left:event.pageX+"px", top:event.pageY+25+"px"});
	});

Met het orginele script van de website, onthoud hij gewoon de text van de vorige link waar een mouseover overheen is geweest. Dus als de title dan niks is, krijg je gewoon de tekst van de vorige link.

Ook geen errors in firebug trouwens. Iemand enig idee?

Hartstikke bedankt,

Niels.

Mitchell

14-11-2008 15:49

Dit bedoel je? Ik heb het zelf al eens geprobeerd en dat koste me 3/4 uur, zonder succes. Je zou het zelf nog verder kunnen proberen, maar ik heb het al opgegeven.. :)

Niels van K

14-11-2008 16:00

jQuery("a").bind("mouseover", function( event ) {
    if (jQuery(this).attr("title") != "") {
    	this.newtitle = this.title;
    	    this.title = "";
        jQuery("a").bind("mouseover", function( event ) {
            jQuery("#hintcontainer").text(this.newtitle);
            jQuery("#hintcontainer").css({display:"block",left:event.pageX+"px", top:event.pageY+25+"px"}).fadeTo(200, 0.8);
        }).bind("mouseout", function( event ) {
            jQuery("#hintcontainer").fadeTo(200, 0.0);
        }).bind("mousemove", function( event ) {
            jQuery("#hintcontainer").css({left:event.pageX+"px", top:event.pageY+25+"px"});
});
}
});

Heb het nu werkend, lijkt alleen of hij de if niet pakt, wat als ik bijvoorbeeld over een link ga met title="" geeft hij nog een title, heel raar.

Mitchell

14-11-2008 16:06

Vervang hem eens door deze if statement.


if (this.hasAttribute("title") === true)

Overigens deze var this = $(this); heb je weg gehaald?

Niels van K

14-11-2008 16:17

Ja klopt, kreeg met die var een error, denk ik omdat je this niet mag defineren?

Nu zit ik met het laaste probleem:

Het werkt, maar als ik bijvoorbeeld over link 'a' over ga, doet hij het, maar ga ik er nog een keer over heb ik weer een leeg veld.

Reageren

Inloggen om te reageren