[JQuerry][CSS][HTML]Hulp nodig bij Expanding Tooltips.

[IIsnickerII]

Hallo Tweakers!

Ik zit met een probleempje. Ik ben bezig met het maken van tooltips bij <label> functies.
Op dit moment hebben de windows van deze tooltips een fixed grootte. Dat komt omdat de popup zelf
vanaf een image afkomstig is. Nu heb ik van dat plaatje een Top, Center en Bottom deel gemaakt,
maar nu moeten ze nog als popup aan elkaar geplakt worden.

Ik heb gewerkt met een standaard JQuery Tooltip script.
Ik werk ook binnen het Zend Framework, hoewel ik denk dat dit niet zo van toepassing is.

Mijn code heb ik momenteel als volgt:

In mijn header staat natuurlijk de link naar het script van JQuery.

HTML:

<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

In mijn body staat momenteel (tussen enkele <div>jes in) deze code:

HTML:

<label title="<?php echo $this->translate->_("Type in your full name here."); ?>"><?=$this->translate->_("Name")?>* <?=write_error("nombre",$this->form,$this->error)?></label>

Ten slotte sluit ik mijn HTML af met een javascriptje waar het volgende in staat:

JavaScript:

$(document).ready(function() {
    $("label[title]").tooltip();
})

Mijn css is als volgt:

Cascading Stylesheet:

.tooltip {
    display:none;
    background:transparent url(/img/tooltip/blue_arrow.png);
    font-size:12px;
        font-family:"Century Gothic", Tahoma, Arial, Verdana, Helvetica, sans-serif;
    height:70px;
    width:160px;
    padding:25px;
    color:#fff; 
}

Wat ik al heb proberen te doen:
Ik heb al de single image in 3 delen gedeeld. Een top, een center van 1 pixel hoog, en een bottom met een pijl.
Ik ben toen gaan zoeken naar een popup script dat deze manier van popups showen al hanteerde en stuitte toen op dit script.


Na het script stap voor stap gevolgd te hebben, kreeg ik het niet aan de praat. Toch was ik ervan overtuigd dat ik dit script beter zou kunnen implementeren in hetgene wat ik al heb, wat wel werkt.

Nu dus mijn vraag:

Zijn er delen van mijn code die ik moet aanpassen om mijn tooltips in 3 delen te delen? Ik weet dat ik in ieder geval de css moet bijvullen met .tooltipTop en .tooltipBtm classes. Maar moet ik verder ook nog bepaalde referenties in het script aanpassen om het gewenste effect te krijgen? Het gaat me hier dus vooral om het oproepen van een tooltip die bestaat uit verschillende divjes, zodat deze langer of korter wordt naarmate er meer of minder tekst in staat. Ik ben totaal geen expert op het gebied van Javascript en JQuery, en wil graag vragen of iemand mij kan begeleiden dit voor elkaar te krijgen.

Alvast bedankt!

[Verwijderd]

Volgens dat jQuery script kan je alles gebruiken als tooltip, het script regelt de positionering voor je dus:
Om maar in divjes te spreken:

HTML:

<div class="tooltip">
   <div class="tooltip-top">
      <div class="tooltip-body">Inhoud van mijn tooltip die heel lang kan worden</div>
   </div>
</div>

Cascading Stylesheet:

div.tooltip {
   width: 150px;
   background: url('vertical-repeating-background.png') repeat-y left top;
}
div.tooltip-top {
   background: url('top-border.png') no-repeat left top;
   padding-top: 20px; /* hoogte van de 'boverand' */
}
div.tooltip-body {
   background: url('bottom-border.png') no-repeat left bottom;
   padding-bottom: 20px; /** hoogte van de onderrand */
}

De geneste elementen zouden over elkaar heen moeten komen en de padding-top en bottom zorgen er voor dat de onder en boven rand zichtbaar is en er geen tekst overheen loopt.

Semantisch gezien is dit een beetje dramatisch dus je zou de bovenkant bijvoorbeeld kunnen vervangen met een heading ofzo en de content een <p> kunnen laten zijn zodat onze minder visueel ingestelde medemens er ook nog wat mee kan.

[Wiethoofd]

Waarom niet de pseudo classes :before en :after gebruiken voor respectievelijk de boven en onderkant van je divje/span of p; of gewoon de ronde randen met een border-radius doen, het kan volledig met CSS, zelfs de inhoud van de tooltip met de css 'content: attr(title)' of een ander attribuut die je set op het label.

[R4gnax]

Wiethoofd schreef op woensdag 22 februari 2012 @ 22:26:
Waarom niet de pseudo classes :before en :after gebruiken voor respectievelijk de boven en onderkant van je divje/span of p; of gewoon de ronde randen met een border-radius doen, het kan volledig met CSS, zelfs de inhoud van de tooltip met de css 'content: attr(title)' of een ander attribuut die je set op het label.

De :before en :after pseudo elementen uit CSS 2.1 generated content worden nog niet ondersteund door IE7, die binnen bepaalde doelgroepen nog een te groot marktaandeel heeft om niet een degelijk alternatief te geven.

Zelf zou ik ronde hoekjes, schaduwen, etc. afhandelen met CSS3. Mocht je browser deze constructies niet ondersteunen, krijg je altijd nog iets zinnigs en toch nog net afgewerkts te zien. Even zo voor de connector / pointer: deze kun je toevoegen door elementen met :before en :after toe te voegen en deze tot een pijlpunt te vormen mbv CSS polygons. Ondersteunt je browser geen CSS 2.1 generated content, dan mis je gewoon de pijlpunt, maar blijft de rest van de tooltip er goed uitzien.

Zie bijvoorbeeld eens: http://nicolasgallagher.com/pure-css-speech-bubbles/


Zelf ben ik op een nieuw project in aanbouw nog iets verder gegaan dan CSS polygons. Ik wilde daar ook de pijlpunt binnen de box-shadow hebben, wat met CSS polygons niet echt kan. In plaats daarvan gebruik ik een CSS3 2D transform om een simpel vierkant blokje (toegevoegd met :after) dat een box-shadow draagt 45 graden te roteren en zo een diamant te vormen. Met een juiste clipping rectangle haal je die diamant precies doormidden en kun je de resulterende pijlpunt naadloos met de ballon verbinden. Levert een heel mooi eindresultaat en blijft ook haarscherp wanneer je inzoomt of de site op een device met een hoog DPI scherm bekijkt.

[ Voor 15% gewijzigd door R4gnax op 22-02-2012 23:20 ]

[Wiethoofd]

@R4gnax, een nette oplossing is deze versie http://csswizardry.com/2010/11/improving-css-tooltips/
Zelf doe ik een driehoekje onderaan de bubbel door gewoon een hele dikke border te nemen en 3 zijden transparant te maken.

[R4gnax]

Wiethoofd schreef op woensdag 22 februari 2012 @ 23:26:
@R4gnax, een nette oplossing is deze versie http://csswizardry.com/2010/11/improving-css-tooltips/

Uhm.. Nee. Dat is het niet. Als je het title attribuut gebruikt i.c.m. met de attr() functie, dan verschijnt op moderne browsers de tooltip dubbel; je ziet dan zowel de CSS tooltip als de native tooltip (uit de title). Als je een custom data-* attribuut gebruikt dan heb je dit probleem niet, maar breek je functionaliteit voor oudere browsers en – veel belangrijker eigenlijk... – screen readers.

Er zijn ook wel screen readers die CSS generated content lezen, maar dat doen ze lang niet allemaal. Er zijn er ook nog die zelfs niet eens de title lezen. De enige manier om een rich tooltip op een bruikbare manier te doen is door een JavaScript oplossing te combineren met WAI-ARIA voor accessibility.

Wiethoofd schreef op woensdag 22 februari 2012 @ 23:26:
Zelf doe ik een driehoekje onderaan de bubbel door gewoon een hele dikke border te nemen en 3 zijden transparant te maken.

En dat zijn eerder door mij genoemde CSS polygons...

[ Voor 7% gewijzigd door R4gnax op 23-02-2012 20:23 ]