(D)HTML, Tooltip

[_cyclops_]

Dit zullen jullie allemaal wel kennen, een tooltip als je over een linkje heen gaat... nu heb je overlib.js en al die dingen.. maar volgens mij moet dit allemaal wel makkelijker kunnen, hij hoeft alleen in te werken in IE5 en hoger enzo...

en 'k wil graag html gebruiken in de tooltip, maar dit is niet zo moeilijk geloof ik

Kan iemand mij dit laten zien?

'k heb natuurlijk al ge-google'ed maar 'k heb er nu al zo'n 3 uurtjes mee bzig, en 'k kan toch niet vinden wat ik zelf fijn vind.. en zelf maken lukt ook niet erg

Iemand?

[Tim Schuhmacher]

daar waar je die overlib.js vandaan heb zal wel een help oid staan? Geen readme erbij?

[_cyclops_]

ik wil geen overlib omdat die 25 kb is.

[Tim Schuhmacher]

aah ik snap het

[inTIMidate]

http://download.macromedia.com/pub/exchange/MX143243_dHTMLTooltips.mxp

download die extention voor dreamweaver

[_cyclops_]

dreamweaver?!

zo kunnen we 't allemaal natuurlijk, maar dat wil 'k liever ook niet...

[Verwijderd]

<div id="blaat" style="position: absolute; left: 100px; top: 50px; height: 100px; width: 100px; visibility: hidden">Blaaaaaat</div>

<a href="blaat.html" onmouseover="blaat.style.visibility = 'visible';" onmouseout="blaat.style.visibility = 'hidden';">Linkje</a>

De rest mag je zelf doen...

[edwinistrator]

er is ook een lite-version van overlib die 8 kb is

download hier overlib zipje

[MrTinux]

Ehh misschien denk ik te makkelijk, maar als je een tooltip boven een link wilt doe je toch gewoon zo:

code:

<A HREF="test.html" TITLE="Deze link brengt je weer verder">Klik hier</A>

[cutter]

Wat wil je p'sies. Ik zoek 5 minuten en ik vind tig links.

http://dhg.ravecore.com/ToolTip.shtml
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/library/tooltip/tooltip.asp
http://www.dynamicdrive.com/dynamicindex5/texttool.htm
http://dhtmlkitchen.com/dhtml/ui/tooltip/tooltip.html

[_cyclops_]

Bedankt voor de reply's

De overlib van 8 kb staat me al goed aan en die ga 'k even proberen, als dat nie tlukt heb 'k nog wat links....

[r0bert]

Je kunt ook gewoon een divje/.. invoegen op de plaats van de muiscursor als je over een bepaalde link heen gaat..
Moet je natuurlijk wel even een hoge z-index meegeven, zodat je 'zeker' weet dat de div voor de rest van de pagina verschijnt ..

dus iets als:

onmousover="tjeVerschijn();" onmouseout="tjeVerdwijn();"

functie tjeVerschijn() {
plaats div op de huidige positie van de muiscursor
schrijf de juiste (inner)HTML naar de div
maak de div zichtbaar
}

function tjeVerdwijn () {
maak de div onzichtbaar
}

[wicher|IA]

idd, gewoon

code:

<a href="url" title="tooltiptekst">linktekst</a>

• supersimpel
• hoef je niks extra voor na te denken
• werkt vanaf IE4 ofzo

[_cyclops_]

de title manier is ook wel oke, maaar 'k wilde html gebruiken in m'n tooltip, dat gaat niet zo

opzich is de div manier natuurlijk erg simpel, alleen kreeg ik hem niet op de plaats van de cursor...

Iedereen bedankt voor de reply's

[r0bert]

een divje voor de 'tooltips':

code:

<div id="toolTipDiv"> </div>

en een javascriptje:

code:

function toolTip(zichtbaarVar,dataNummer) {
  var mousex = window.event.x;
  var mousey = window.event.y;

  document.all['toolTipDiv'].innerHTML = '<a href="' + link[dataNummer] + '">' + titel[dataNummer] + '</a>';

  document.all['toolTipDiv'].style.left = mousex + 5;
  document.all['toolTipDiv'].style.top = mousey;
  document.all['toolTipDiv'].style.visibility = zichtbaarVar;
}

en als laatste de aanroep:

code:

<a href="http://www.dingetje.nl/iets/" onMouseOver="toolTip('visible','1');" onMouseOut="toolTip('hidden','1');"> Ga hierheen </a>

Zoiets .. in het voorbeeldje gebruik ik arrays om de data op te vissen, dus vandaar dataNummer.

/edit:
even
document.all['toolTipDiv'].style.visibility = vis;

gewijzigd naar:
document.all['toolTipDiv'].style.visibility = zichtbaarVar;

(kwam doordat ik de var een andere naam het gegeven ..
lekker scherp Cheatah

[Verwijderd]

Op maandag 03 december 2001 18:34 schreef r0bert het volgende:

document.all['toolTipDiv'].style.visibility = zichtbaarVar;

[Verwijderd]

Op maandag 03 december 2001 19:06 schreef Cheatah het volgende:

Hoezo oplettend

Toevallig dat ik zelf der ook net mee aan het klooien was..

[Verwijderd]

Op maandag 03 december 2001 19:09 schreef Tizzwat het volgende:

Hoezo oplettend

Toevallig dat ik zelf der ook net mee aan het klooien was..

Man, m'n hersens staan de afgelopen dagen helemaal strak.
Dat komt allemaal door Pelle!! Die heeft veel te goeie ideeën

[_cyclops_]

opzich werkt het!, alleen komt ie niet 'bij' m'n cursor... terwijl in mousex en mousey wel een waarde komt te staat... dan zou 't dus aan de .style.top en .left liggen... enig idee?

[_cyclops_]

<div id="toolTipDiv" style="position:absolute;"></div>

dat was ut