Tooltipps langsam ausblenden?

eviLwitcH · 28. November 2006

Hallo Zusammen,

Ich verwende das unten stehende Script, um Tooltipps beim mouseover anzeigen zu lassen. Kann mir jemand sagen, wie ich das abändern müsste, damit der Tipp länger angezeigt wird bzw. ich da auch mit der Maus drauf kann, um weitere Links darin anzeigen zu lassen?

Hier das Beispiel:

Code:

<html>
<head>
<title>Testseite</title>
<style type="text/css">
<!--
div.tooltip
	{
	visibility: hidden;
	position: absolute;
	width: 80px;
	background-color: white;
	}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function tooltipMouseOver (eid, event)
{
	if (!event.pageX)
	         {
	         xpos = event.clientX;
	         ypos = event.clientY;
	         }
	else
	         {
	         xpos = event.pageX;
	         ypos = event.pageY;
	         }

	t = window.setTimeout ('showTooltip (\'' + eid + '\', ' + xpos + ', ' + ypos + ')', 100);
}
function showTooltip (id, xpos, ypos)
{
	if (document.getElementById (id + '_tooltip'))
	         {
	         document.getElementById (id + '_tooltip').style.visibility = 'visible';
	         document.getElementById (id + '_tooltip').style.left = xpos + 'px';
	         document.getElementById (id + '_tooltip').style.top = ypos + 'px';
	         }
}
function hideTooltip (id)
{
	window.clearTimeout (t);
	if (document.getElementById (id + '_tooltip'))
	   	document.getElementById (id + '_tooltip').style.visibility = 'hidden';
}
// -->
</script>
</head>
<body>
<a href="#" id="test1" class="tooltip" onmouseover="tooltipMouseOver (this.id, event)" onmouseout="hideTooltip(this.id)">test1</a>
<a href="#" id="test2" class="tooltip" onmouseover="tooltipMouseOver (this.id, event)" onmouseout="hideTooltip (this.id)">test2</a>
<div id="test1_tooltip" class="tooltip">bla1</div>
<div id="test2_tooltip" class="tooltip">bla2</div>
</body>
</html>

Würde mich freuen, wenn jemand da helfen könnte...ich habe die Hoffnung, dass es nicht all zu kompliziert sein kann, wenn man im Gegensatz zu mir Ahnung von JavaScript hat

Quaese · 28. November 2006

Hi,

Du könntest einen weiteren Timer starten, wenn ein Link verlassen wird. Erst wenn dieser abgelaufen ist und sich der
Mauszeiger nicht über dem Tooltip befindet, wird das Hilfeelement ausgeblendet. Andernfalls beendest Du im
onmouseover-Event des Tooltips den Timer, was zur Folge hat, dass der Tipp stehen bleibt. Das Schliessen veranlasst
Du im onmouseout-Event.

Code:

<html>
<head>
<title>Testseite</title>
<style type="text/css">
<!--
div.tooltip
	{
	visibility: hidden;
	position: absolute;
	width: 80px;
	background-color: white;
	}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
var hTimer;  // Timerhandle

function tooltipMouseOver (eid, event){
	if (!event.pageX)
	         {
	         xpos = event.clientX;
	         ypos = event.clientY;
	         }
	else
	         {
	         xpos = event.pageX;
	         ypos = event.pageY;
	         }

	t = window.setTimeout ('showTooltip (\'' + eid + '\', ' + xpos + ', ' + ypos + ')', 100);
}

function showTooltip (id, xpos, ypos){
	if(document.getElementById (id + '_tooltip')){
	  document.getElementById (id + '_tooltip').style.visibility = 'visible';
	  document.getElementById (id + '_tooltip').style.left = xpos + 'px';
	  document.getElementById (id + '_tooltip').style.top = ypos + 'px';
	}
}

function hideTooltip (id){
	window.clearTimeout (t);
	if(document.getElementById (id + '_tooltip'))
	  document.getElementById (id + '_tooltip').style.visibility = 'hidden';
}
// -->
</script>
</head>
<body>
<a href="#" id="test1" class="tooltip" onmouseover="tooltipMouseOver (this.id, event)" onmouseout="hTimer = window.setTimeout('hideTooltip(\''+this.id+'\')', 300);">test1</a>
<a href="#" id="test2" class="tooltip" onmouseover="tooltipMouseOver (this.id, event)" onmouseout="hTimer = window.setTimeout('hideTooltip(\''+this.id+'\')', 300);">test2</a>
<div id="test1_tooltip" onmouseover="window.clearTimeout(hTimer);" onmouseout="hideTooltip(this.id.split('_')[0]);" class="tooltip">bla1</div>
<div id="test2_tooltip" onmouseover="window.clearTimeout(hTimer);" onmouseout="hideTooltip(this.id.split('_')[0]);" class="tooltip">bla2</div>
</body>
</html>

Ciao
Quaese

Tooltipps langsam ausblenden?

eviLwitcH

Grünschnabel

Quaese

Moderator

Neue Beiträge