Eigenes ToolTip blockieren

DoRiMaN

Erfahrenes Mitglied
Hallo an Alle!

Ich habe hier ein JavaScript für ein ToolTip (ein DIV-Layer welches der Maus folgt).

Code:
<script>
	var d = document;
			
	var ie4 = d.all;
	var ns6 = d.getElementById && !d.all;
			
	var offsetX = 20;
	var offsetY = 12;
	var delay = 100;
			
	var tip;
	var t0,t1;
	var x,y;

	function initTip() {
		tip = d.getElementById("toolTipLayer");
		d.onmousemove = trackMouse;
	}
	function toolTip(title, msg) {
		if (t0) clearTimeout(t0);
		if (t1) clearTimeout(t1);
				
		if (toolTip.arguments.length < 1) {
			t0 = setTimeout("tip.style.visibility = 'hidden'", 10);
		} else {
			t1 = setTimeout("tip.style.visibility = 'visible'", delay);
		}
	}
	function trackMouse(e) {
		x = (ns6) ? e.pageX : window.event.clientX+d.body.scrollLeft;
		y = (ns6) ? e.pageY : window.event.clientY+d.body.scrollTop;
			
		var tipW = (ie4) ? tip.clientWidth : tip.offsetWidth;
		var winW = (ns6) ? (window.innerWidth-20)+window.pageXOffset : d.body.clientWidth+d.body.scrollLeft;
		var tipH = (ie4) ? tip.clientHeight : tip.offsetHeight;
		var winH = (ns6) ? (window.innerHeight-20)+window.pageYOffset : d.body.clientHeight+d.body.scrollTop;
			
		tip.style.left = (x+offsetX+tipW >= winW-offsetX) ? x-(tipW+offsetX) : x+offsetX;
		tip.style.top = (y+offsetY+tipH >= winH-offsetY) ? winH-(tipH+offsetY) : y+offsetY;
			
		return true;
	}
</script>

aufgerufen wird das Ganze so:
Code:
<img src="info.gif" style="cursor: pointer;" width="15" height="15" onMouseOver="toolTip('Blabla','blabla');" onMouseOut="toolTip();">

Es klappt auch ganz gut. Nun möchte ich es aber anders. Ich möchte, dass der ToolTip nicht bei MouseOver sondern beim Klicken geöffnet wird. Was ja kein Problem ist. Mein Problem liegt darin, dass der Tooltip an dem Punkt geöffnet werden soll, wo man klickt, jedoch soll es dann dort bleiben und nicht mehr mit der Maus mit. Dies damit man Text IM ToolTip dann markieren könnte. Ist dies möglich?

Leider habe ich nach langem Versuchen immer noch nichts zu Stande gebracht.

Danke und Greetz

DoRiMaN
 
Irgendwo wird bei dir noch eine der beiden Funktionen aufgerufen, schätze mal trackMouse(*)
diese Funktion ist für die Verschiebung verantwortlich dürfte warscheinlich mit dem setTimeout aufgerufen werden
flooo
 
Oops, ja, habe ein Codeschnipsel vergessen :-)

trackMouse() wird ja in der Funktion initTip() aufgerufen, diese wiederum, wird so aufgerufen:

Code:
<div id="toolTipLayer" style="position: absolute; visibility :hidden; -moz-opacity: 0.92;"></div>
<script type="text/javascript">
	<!--
	initTip();
	//-->
</script>
 
Dazu brauchst du den Toopltip nicht. Du kannst einfach einen unsichtbaren Layer (display: none), den du mit CSS auf dem Ziellayer positioniert hast (z-index) mit folgender Funktion ein- und ausbleden:
HTML:
<script type="text/javascript"><!--
 function swap(id) {
  	obj = document.getElementById(id);
 	obj.style.display = (obj.style.display == 'none') ? '' : 'none';
 }
 //--></script>
Gleicher Effekt, deutlich weniger Code. Der Tooltip braucht eine Id und im Ziellayer steht dann onclick="swap('IchBinDieIdDesZugehörigenTooltips')" halt nur mit der richtigen Id.
 
Zuletzt bearbeitet:

Neue Beiträge

Zurück