Hoi apcmvw,
Nee, de standaard "tooltips" die verschijnen als je over een element met een title="..." hovert, die kan je helaas niet opmaken. Dat komt omdat ze een functie van de browser resp. het Operating System zelf zijn.
Maar het kan wel anders, met ook nog het voordeel dat de pop-up er altijd meteen is, en ook niet na 3 tellen verdwijnt zoals bij de standaard tooltip. Plus het voordeel dat je er meestal ook nog links in kunt zetten, wat bij een tooltip onmogelijk is.
Globaal gaat dat als volgt:
- Het element waar de pop-up bij hoort, moet in de css een {position: relative;} krijgen.
- Binnen dat element zet je een <span>...</span> waar de tekst van de pop-up in komt.
- Deze span krijgt een {position: absolute;} ten opzichte van het element waar het bij hoort: daarmee wordt de positie geregeld, en loopt de rest van de tekst gewoon door.
- De <span> kan je opmaken zoals je wilt: met kadertje, ronde hoeken, eigen achtergrond-kleur, tekst-kleur, lettertype, letterformaat, enz. enz.
- In de normale toestand wordt de pop-up niet getoond door een {left: -9999px;}.
- Bij een hover krijgt de pop-up een {left: 0;} en komt op z'n plaats.
Dit kan allemaal met alleen html en css (er is geen javascript voor nodig).
- Voorbeeld van een pure css pop-up: text-pop-up.htm.
- NB: In de "Lees meer ..." pop-up's staan ook nog twee links naar andere voorbeelden.
Je kan er javascript aan toevoegen voor extra functionaliteit, bv. zodat de popup blijft staan als je weg-hovert (de pop-up heeft dan een eigen "Sluit"-knopje).
Met een css pop-up en javascript kan je ook een eigen fabrikaat "confirm-box" maken.
De animatie met javascript kan je ook naar smaak aanpassen, zoals een "Vliegende confirm-box".
Is dat in de richting?
Met vriendelijke groet,
CSShunter
Dat is iets bewerkelijker, want een <img> kan geen ingesloten onderdelen hebben (er is geen eind-tag </img>, dus er kan niets tussenin komen).
