Gebruiker:Taka/Tooltips

tooltip in actie

Intro

Tooltips zijn blokjes met extra informatie die alleen opduiken als de gebruiker met zijn muis over een trefwoord gaan. Een voorbeeld is het tekstje dat (in de wikipedia) opduikt als je met je muis over een hyperlink gaat.

Ik wil meer. Mijn idee is uiteindelijk dat elk lemma naast een tekst ook een samenvatting krijgt van maximaal 100 of 150 karakters. Dan kunnen behalve "links" ook "tooltips" een plek krijgen, extra informatie die in de pagina zit. Het is namelijk handig om niet het hele artikel op te hoeven vragen als je van een persoon die in een artikel wordt genoemd, eigenlijk alleen de basis dingen wil weten.

Ik heb wat zitten experimenteren, en het resultaat is niet goed genoeg om echt ingevoerd te worden, maar in Mozilla-Firefox lukt het wel om tooltips te tonen. Daar is wel een aanpassing van de stylesheet voor nodig. Gelukkig kan iedere vaste gebruiker dingen aan zijn eigen stylesheet toevoegen.

Dit idee is gebaseerd op http://psacake.com/web/jl.asp en als iemand nog aanvullingen of betere ideeën heeft, dan hoor ik het graag.

Stylesheet

Voeg dit toe aan je stylesheet: (je stylesheet ka je aanvullen op Gebruiker:JeNaam/monobook.css, kies daarbij het stylesheet dat overeenkomt met de stijl in je preferenties.)

---

/* start tooltip code  */

div.info {
  position:relative;               /*required */
  background-color:yellow;         /*use any color you like */
  cursor:help                      /*optional, or use another cursor */
}

div.info:hover {
  background-color:pink            /*use any color you like */
}

div.info:hover div.urlexpansion {
  display:block;                   /*required */
  position:absolute;               /*required */
       /*border and size specifications, change as you like */
  top:0px;
  left:-5px;
  width:15em;
       /* colors, change as you like */
  border:1px solid #0cf;
  background-color:#cff;
  color:#000;
}

/* end tooltip code  */

---

Test of het werkt

Als je dat hebt gedaan, dan verschijnt hier af en toe tekst met een gele achtergrond. Als je je

muis

natuurlijk niet dat beest, maar dat schuifding aan je computer

daarover beweegt, dan verschijnt er extra informatie. Ik heb het nog niet werkend kunnen krijgen in

Internet Explorer

De browser van Microsoft.

, maar wel in

Firefox

Een open-source browser, verkrijgbaar via http://www.mozilla.org

.

Voorbeeldpagina

Om te laten zien hoe het in een artikel in de wikipedia gebruikt zou kunnen worden, heb ik wat zitten werken aan een voorbeeldpagina: Gebruiker:Taka/TooltipVoorbeeld.

Technische problemen

1. Werkt niet in Internet Explorer (werkt eigenlijk alleen in Mozilla/Firefox). Deze methode zal niet in de huidige versie van Internet Explorer gaan werken. De reden is dat dit gebruik maakt van de hover pseudoclass op een div element. IE ondersteunt hover alleen op een link (a element). Ik zie geen goede manier om daar gebruik van te maken met de wikipedia code.
2. De "title" van een hyperlink komt over de tooltip heen en maakt die onleesbaar. Dat is niet op te lossen met een stylesheet. Mogelijk wel met javascript. (opgelost door de "top" en "left" waarden in tooltip aan te passen, daardoor valt de tooltip over de link heen, en wordt de 'title' niet getoond.)
3. In de printvriendelijk versie duikt de tekst van de tooltip op. Dit is omdat op dit moment gebruik wordt gemaakt van een standaard css-class die onzichtbaar is bij lezen, maar wel zichtbaar bij printen (class urlexpansion). Een oplossing zou zijn als er een extra onzichtbare class in de standaard stylesheet bij komt. Daarvoor moet de standaard stylesheet van de wikipedia worden aangepast.
4. Bij woorden helemaal rechts op de pagina, verdwijnt de tooltip uit beeld. Ik denk er nog over na hoe/of dat opgelost kan worden.

Verder is het nog niet uitgetest bij artikelen met een ingewikkelde structuur (plaatjes, tabellen...).

Hoe maak je ze zelf

De tooltips zoals hier en in de voorbeeldpagina gedemonstreerd kan je op de volgende manier zelf maken:

<div class="info" style="display:inline;">zichbare tekst<div class="urlexpansion">tekst van de tooltip</div></div>

Het is ook noodzakelijk om de hele tekst van het artikel in een div te zetten:

<div>
...tekst van het hele artikel....
</div>

Waar het heen kan gaan

Dit is nogal speculatief, maar het zou misschien leuk zijn om dit in te bouwen in de wikipedia. Ik zie dan de volgende aanpassingen aan de wikipedia code:

• Een aanpassing in de standaard stylesheet, specifiek een toevoeging van een 'class (afgezien van bovenstaande toevoegingen aan de stylesheet). Dit lost dan het probleem met de printvriendelijke versie op.

        div.tooltip {
            display:none; 
        }

• De inhoud van elk artikel moet in een div worden gezet. De reden is dat er anders ongewenste regel afbrekingen komen.
• Een "wiki" manier om tooltips toe te voegen. Ik heb daar nu niet direct een voorstel voor, er is misschien wel een sjabloon voor te maken. Daar ga ik me nu niet aan wagen.
• Eventueel zou bij elk artikel een summary komen, die automatisch als tooltip wordt gebruikt. Op de manier zoals het nu gaat, moet voor elke tooltip een tekst worden ingevoerd. Het zou handig zijn om daar een summary voor te gtebruiken. Dit zou dan de title tag in de links moeten vervangen. Over de wenselijkheid van de invoering van een dergelijke summary valt nog wel wat te discussiëren.

Deze aanpassingen verhelpen twee van de vier genoemde technische problemen (het probleem met de printvriendelijke versie en het probleem met de title). Blijven er nog twee over: geen ondersteuning voor Internet Explorer (maar Internet Explorer gebruikers hebbem er ook geen last van), en het uit beeld verdwijnen van de tooltip, dat zal toch echt opgelost moeten worden.

Update maart 2005

Ik had wat tips hier en daar gekregen. Ik heb er nog niet heel veel mee gedaan, maar het is prettig om ze hier bij elkaar te zetten.

gebruikt van "print" in stylesheet

@media print {div.info {display: none;}}

Bovenstaande tip zou technisch probleem #3 kunnen oplossen. Helaas werkt het niet. In de uiteindelijke print komt de verborgen informatie toch te voorschijn, en wel gewoon in de tekst. En ook de print-preview blijft het tonen. Maar misschien moet ik er toch nog eens goed naar kijken, want het is wel een interessant spoor.

Gebruik een "span" ipv een "div"

Ga ik nog even naar kijken, ik weet niet precies welk probleem het zou moeten oplossen.

Oplossing voor IE?

Iemand verwees me naar http://dean.edwards.name/IE7, ik moet zeggen dat ik er wel even ben gaan kijken, maar het nog niet uitgebreid heb bestudeerd.