Tooltip

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

1.105 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.

14-11-2008 05:44

[qoute]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.[/quote]Waarom??

Niels van K

14-11-2008 09:39

Ik heb werkelijk geen idee, als ik bijvoorbeeld deze link heb:

<a href="index.php" title="Hoi">bla</a>

En ik ga daar met mijn muis overheen krijg ik netjes "Hoi", maar als ik deze heb:

<a href="index2.php" title="">bla</a>

Krijg ik ook Hoi, omdat de title leeg is, is de andere tekst nog gecached.

Bedankt,

Niels.

Mitchell

14-11-2008 10:21

Daar zul je dan denk ik een check voor in moeten bouwen, iets als "if attr[title] = aanwezig, show tooltip" en anders gewoon niets uitvoeren.

Edit: document.getElementById("hintcontainer").style.display = "none"; waarom dit? Je werkt met Jquery. $("#hintcontainer").hide(); of $("#hintcontainer").css("display", "block");

Niels van K

14-11-2008 10:29

Ik ben niet zo'n held in jQuery, vandaar.

jQuery("a").bind("mouseover", function( event ) {
	if (this.title != "") {
		this.newtitle = this.title;
		this.title = "";
	}
	if (this.newtitle == "") jQuery("#hintcontainer").hide();
	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"});
});

Dan zou zoiets toch genoeg moeten zijn? Ik krijg het maar niet voor elkaar..

Bedankt,

Niels.

Mitchell

14-11-2008 10:39

Misschien zoiets?


$("a").each(function(){
	var $this = $(this); 
	if (this.hasAttribute("title") === true)
		// voer script uit..
	else
		// voer iets anders uit..
});

Niels van K

14-11-2008 10:43


jQuery("a").each(function(){
    var this = jQuery(this); 
    if (this.hasAttribute("title") === true)
        // voer script uit..
        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"});
    else
        jQuery("#hintcontainer").hide();
});

Zoiets? Ik krijg echter 2 fouten in FireBug:


missing variable name
[Break on this error] var this = jQuery(this); \n
element.dispatchEvent is not a function
[Break on this error] element.dispatchEvent(event);

Ik ben helemaal niet thuis in Javascript en alles daarom heen, vandaar misschien deze amateuristische fout, hehe.

Bedankt!

Mitchell

14-11-2008 10:54

Javascript zelf ben ik opzich ook niet goed in, maar ik ben wel redelijk goed in Jquery. Probeer dit eens?


$("a").each(function(){
    var this = $(this); 
    if ($this.attr("title") === true)
        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"});
});

Niels van K

14-11-2008 15:36

Hoe moet ik dat doen? Ik heb namelijk ook Prototype draaien, en mij is verteld om dan alle $ door jQuery te vervangen om het te laten werken.. Ik heb het volgende aangepast (als ik met $ tekens gebruikt krijg ik dus een conflict met prototype):


jQuery.noConflict();

// initialize the jquery code
 jQuery(document).ready(function(){
//close all the content divs on page load
jQuery(".mover").hide();

// toggle slide
jQuery("#slideToggle").click(function(){
// by calling sibling, we can use same div for all demos
jQuery(this).siblings('.mover').slideToggle();
});

// regular toggle with speed of 'slow'
jQuery("#toggleSlow").click(function(){
jQuery(this).siblings('.mover').toggle('slow');
});

// fade in and out
jQuery("#fadeInOut").toggle(function() {
jQuery(this).siblings('.mover').fadeIn('slow');
}, function() {
jQuery(this).siblings('.mover').fadeOut('slow');
});

//animate
jQuery("#animate").click(function() {
jQuery(this).siblings('.mover')
.slideDown(5500).fadeOut(7300);
});

jQuery("a").each(function(){
    var this = jQuery(this); 
    if (jQuery(this).attr("title") === true)
        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"});
});




});

Dit is mijn hele jQuery script, het bovenste is een slide in en out effect.

Mitchell

14-11-2008 15:39

Je moet nooit meerdere javascript frameworks draaien, dat gaat zo'n beetje altijd fout. Ga eens kijken naar prototip.

Niels van K

14-11-2008 15:45

Ja maar dan zit ik ook met die slide in en slide out.. En zonder die tooltip in jQuery draaide het foutloos. :)

Is er echt geen andere manier?

Bedankt,

Niels.

Reageren

Inloggen om te reageren