[jQuery] Tooltip weergeven lukt niet*

[bindsa]

Ik heb het volgende script gemaakt, maar hij werkt niet (met jQuery):

JavaScript:

this.vtip=function(){
    this.xOffset=-30;
    this.yOffset=30;
    $(".vtip").unbind().hover(function(a){
        this.t= this.children('p').html();
        //this.title="";
        this.top=(a.pageY+yOffset);
        this.left=(a.pageX+xOffset);
        $("body").append('<p id="vtip">'+this.t+"</p>");
        $("p#vtip").css("top",this.top+"px").css("left",this.left+"px").fadeIn("fast")
    },
    function(){
        this.title=this.t;
        $("p#vtip").fadeOut("fast").remove()
    }).mousemove(
            function(a){
                this.top=(a.pageY+yOffset);
                this.left=(a.pageX+xOffset);
                $("p#vtip").css("top",this.top+"px").css("left",this.left+"px")
            }
        )
};

Als ik bijv. een tabel heb die er als volgt uit ziet:

HTML:

<table>
<tr>
<td><p>bla bla bla</p></td>
</tr>
</table>

Dan wil ik dat die tekst uit die paragraaf in een soort tooltip weergegeven wordt, dit werkt echter niet, de hele code werkt, alleen deze regel niet:

JavaScript:

        this.t= this.children('p').html();

Weet iemand wat daar mis mee is?

[Kiphaas7]

je laat jquery functies los op een non-jquery object?

JavaScript:

this.t= $(this).children('p').html();

[bindsa]

Dat werkt ook niet, ik moet gewoon de HTML uit de paragraaf hebben en die in variabele t stoppen. Heb alleen geen flauw idee hoe.

[Manuel]

Ik had dit echt anders aangepakt als ik jou was, hetzelfde met:

JavaScript:

$("p#vtip").css({top: this.top+"px", left: this.left+"px" }).fadeIn("fast") 

Verder hoe roep jij deze plugin aan? Als je namelijk

JavaScript:

jQuery.fn.eigenfunctienaam = function() {
    this.each(function() {
          //Hier je code.. alleen dan hoef je geen children meer te gebruiken.
    });
}

$("#watmoetwordengeholverd").eigenfunctienaam();

Leuk voorbeeld: http://snook.ca/archives/javascript/jquery_plugin

[bindsa]

Opgelost, dit werkt wel:

JavaScript:

this.t= $(this).find(":nth-child(1)").html();

[Bosmonster]

Manuel schreef op dinsdag 19 januari 2010 @ 08:13:
Ik had dit echt anders aangepakt als ik jou was, hetzelfde met:

JavaScript:

$("p#vtip").css({top: this.top+"px", left: this.left+"px" }).fadeIn("fast") 

Verder hoe roep jij deze plugin aan? Als je namelijk

JavaScript:

jQuery.fn.eigenfunctienaam = function() {
    this.each(function() {
          //Hier je code.. alleen dan hoef je geen children meer te gebruiken.
    });
}

$("#watmoetwordengeholverd").eigenfunctienaam();

Leuk voorbeeld: http://snook.ca/archives/javascript/jquery_plugin

Vergeet niet altijd return this.each(... te doen om chaining niet te breken in je plugins.

[Manuel]

@Bosmonster: Ja inderdaad, was het vergeten. ty voor aanvulling.

@L0calh0st: Waarom los je het trouwens zou op? Je kan net zo goed een plugin maken die makkelijker werkt waar je simpelweg een title van een bestaand element zelf kan laten weergeven.

[bindsa]

Manuel schreef op dinsdag 19 januari 2010 @ 15:42:
@Bosmonster: Ja inderdaad, was het vergeten. ty voor aanvulling.

@L0calh0st: Waarom los je het trouwens zou op? Je kan net zo goed een plugin maken die makkelijker werkt waar je simpelweg een title van een bestaand element zelf kan laten weergeven.

Het was oorspronkelijk ook met het title element, maar ik wilde iets meer opmaak en <br /> tags e.d. in title element zijn niet toegestaan.

[Manuel]

Maar dan als nog had ik het heel anders aangepakt. Gewoon die HTML dan baseren op een hidden p zoals je dat nou ook doet maar dan zorgen dat je hem ook als $("#element").tooltip() kunt gebruiken. Scheelt je achteraf heel veel dubbele codes indien je dit blijft hanteren.