einde van tooltip tekst

[Redmage]

Hoi,

Wou eens een tooltip uitproberen dwz als je met je muis over tekst komt je een soort tekstballon krijgt.
Ik heb een tabel met drie blokken tekst onder mekaar. Ik wou dat als je op elk blokje tekst gaat staat of over een button scrollt je dus een popup/tooltip krijgt met wat meer uitleg.

Heb het script kunnen invoegen maar nu is mijn probleem dat de tooltip niet blijft bij de knop maar over de rest van de tabel / dus ook de onderliggende teksten gaat daar waar ik het enkel wil hebben over de tekst / dat specifiek onderwerp.

Ik moet dus maw denk ik ergens kunnen zeggen dat de tooltip enkel daar moet blijven, dus afsluiten. Heb al geprobeerd met einde tabel maar dat wijzigt m'n hele tabel. Sorry dat dit misschien een simpele vraag is maar ik ben nog maar een beginner.

Hier is de code

in head:

SCRIPT type="text/javascript">
	/************************************************************************************************************
	(C) [url]www.dhtmlgoodies.com[/url], October 2005
	************************************************************************************************************/	
	var dhtmlgoodies_tooltip = false;
	var dhtmlgoodies_tooltipShadow = false;
	var dhtmlgoodies_shadowSize = 4;
	var dhtmlgoodies_tooltipMaxWidth = 200;
	var dhtmlgoodies_tooltipMinWidth = 100;
	var dhtmlgoodies_iframe = false;
	var tooltip_is_msie = (navigator.userAgent.indexOf('MSIE')>=0 && navigator.userAgent.indexOf('opera')==-1 && document.all)?true:false;
	function showTooltip(e,tooltipTxt)
	{
		
		var bodyWidth = Math.max(document.body.clientWidth,document.documentElement.clientWidth) - 20;
	
		if(!dhtmlgoodies_tooltip){
			dhtmlgoodies_tooltip = document.createElement('DIV');
			dhtmlgoodies_tooltip.id = 'dhtmlgoodies_tooltip';
			dhtmlgoodies_tooltipShadow = document.createElement('DIV');
			dhtmlgoodies_tooltipShadow.id = 'dhtmlgoodies_tooltipShadow';
			
			document.body.appendChild(dhtmlgoodies_tooltip);
			document.body.appendChild(dhtmlgoodies_tooltipShadow);	
			
			if(tooltip_is_msie){
				dhtmlgoodies_iframe = document.createElement('IFRAME');
				dhtmlgoodies_iframe.frameborder='5';
				dhtmlgoodies_iframe.style.backgroundColor='#FFFFFF';
				dhtmlgoodies_iframe.src = '#'; 	
				dhtmlgoodies_iframe.style.zIndex = 100;
				dhtmlgoodies_iframe.style.position = 'absolute';
				document.body.appendChild(dhtmlgoodies_iframe);
			}
			
		}
		
		dhtmlgoodies_tooltip.style.display='block';
		dhtmlgoodies_tooltipShadow.style.display='block';
		if(tooltip_is_msie)dhtmlgoodies_iframe.style.display='block';
		
		var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
		if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; 
		var leftPos = e.clientX + 10;
		
		dhtmlgoodies_tooltip.style.width = null;	// Reset style width if it's set 
		dhtmlgoodies_tooltip.innerHTML = tooltipTxt;
		dhtmlgoodies_tooltip.style.left = leftPos + 'px';
		dhtmlgoodies_tooltip.style.top = e.clientY + 10 + st + 'px';

		
		dhtmlgoodies_tooltipShadow.style.left =  leftPos + dhtmlgoodies_shadowSize + 'px';
		dhtmlgoodies_tooltipShadow.style.top = e.clientY + 10 + st + dhtmlgoodies_shadowSize + 'px';
		
		if(dhtmlgoodies_tooltip.offsetWidth>dhtmlgoodies_tooltipMaxWidth){	/* Exceeding max width of tooltip ? */
			dhtmlgoodies_tooltip.style.width = dhtmlgoodies_tooltipMaxWidth + 'px';
		}
		
		var tooltipWidth = dhtmlgoodies_tooltip.offsetWidth;		
		if(tooltipWidth<dhtmlgoodies_tooltipMinWidth)tooltipWidth = dhtmlgoodies_tooltipMinWidth;
		
		
		dhtmlgoodies_tooltip.style.width = tooltipWidth + 'px';
		dhtmlgoodies_tooltipShadow.style.width = dhtmlgoodies_tooltip.offsetWidth + 'px';
		dhtmlgoodies_tooltipShadow.style.height = dhtmlgoodies_tooltip.offsetHeight + 'px';		
		
		if((leftPos + tooltipWidth)>bodyWidth){
			dhtmlgoodies_tooltip.style.left = (dhtmlgoodies_tooltipShadow.style.left.replace('px','') - ((leftPos + tooltipWidth)-bodyWidth)) + 'px';
			dhtmlgoodies_tooltipShadow.style.left = (dhtmlgoodies_tooltipShadow.style.left.replace('px','') - ((leftPos + tooltipWidth)-bodyWidth) + dhtmlgoodies_shadowSize) + 'px';
		}
		
		if(tooltip_is_msie){
			dhtmlgoodies_iframe.style.left = dhtmlgoodies_tooltip.style.left;
			dhtmlgoodies_iframe.style.top = dhtmlgoodies_tooltip.style.top;
			dhtmlgoodies_iframe.style.width = dhtmlgoodies_tooltip.offsetWidth + 'px';
			dhtmlgoodies_iframe.style.height = dhtmlgoodies_tooltip.offsetHeight + 'px';
		
		}
				
	}
	
	function hideTooltip()
	{
		dhtmlgoodies_tooltip.style.display='none';
		dhtmlgoodies_tooltipShadow.style.display='none';		
		if(tooltip_is_msie)dhtmlgoodies_iframe.style.display='none';		
	}
	
	</SCRIPT>

in body

<td width="234" align="left" valign="top"> <p>*<em> <strong>van 
                    kracht op 1/9/2007</strong></em></p>
                  <p><em><strong>EOO of Echtscheiding wegens Onherstelbare Ontwrichting</strong> 
                    is de nieuwe echtscheidings-vorm die oudere overlapt en alles 
                    vlotter en sneller moet doen verlopen. Echtscheiding wegens 
                    zware fout (overspel, geweld) of op basis van 2 jaar feitelijke 
                    scheiding wordt afgeschaft.<br>
                    </em><em>Voor meer info </em><a href="#" onmouseout="hideTooltip()" onmouseover="showTooltip(event,'EOO tekst invullen');return false"><img src="click_here.gif" width="75" height="20"></p>         
                  <p><strong>* van kracht op 1/3/2007</strong></p>
                  <p><strong><em>Verkeer : voorrangsregel rechts</em></strong><em> 
                    : vanaf nu geldt dat wie van rechts komt altijd voorrang heeft, 
                    zelfs al is hij/zij eerst gestopt en nadien terug doorgereden.<br>
                    </em><em>Voor meer info </em><img src="click_here.gif" width="75" height="20"><br>
                  </p>
                  <p><strong>* van kracht op 1/1/2007</strong></p>
                  <p><strong><em>Afschaffing successierechten voor langstlevende 
                    op gezinswoning</em></strong><em> : zowel voor gehuwden als 
                    samenwonenden geldt dat de langstlevende dus vanaf dit jaar 
                    geen successierechten meer zal moeten betalen op de gezinswoning 
                    </em><em>Voor meer info </em><img src="click_here.gif" width="75" height="20"></p>
                  <p>&nbsp; </p>
                  <p>&nbsp; </p></td>
 </tr>
            </table></td>
          <td></td>

Bedoeling is dus als je op click here gaat staan je de tooltip krijgt.



[Moderator-Edit] Php- en Html- Tag geplaatst. [/Edit]