tooltipp anzeige über der maus

[JayReDee]

Moin Leute,
hab ein Tooltipp allerdings wird das tooltipp immer unter der Maus angezeigt es soll aber über der Maus angezeigt werden was muss ich umändern ???


Style

<style type="text/css">
<!--
#tt1 {
background-image:url(images/tooltipp.png);
color: white;
padding: 3px;
width: 450px;
height: 420px;
border: 2px;
}
.xbtooltip {
display: none;
position: absolute;
background-image:url(images/tooltipp.png);
}
-->
</style>


Script

<script type="text/javascript">
(function(window, document, undefined){
var XBTooltip = function( element, userConf, tooltip) {
var config = {
id: userConf.id|| undefined,
className: userConf.className || undefined,
x: userConf.x || 20,
y: userConf.y || 20,
text: userConf.text || undefined
};
var over = function(event) {
tooltip.style.display = "block";
},
out = function(event) {
tooltip.style.display = "none";
},
move = function(event) {
event = event ? event : window.event;
if ( event.pageX == null && event.clientX != null ) {
var doc = document.documentElement, body = document.body;
event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
}
tooltip.style.top = (event.pageY+config.y) + "px";
tooltip.style.left = (event.pageX+config.x) + "px";
}
if (tooltip === undefined && config.id) {
tooltip = document.getElementById(config.id);
if (tooltip) tooltip = tooltip.parentNode.removeChild(tooltip)
}
if (tooltip === undefined && config.text) {
tooltip = document.createElement("div");
if (config.id) tooltip.id= config.id;
tooltip.innerHTML = config.text;
}
if (config.className) tooltip.className = config.className;
tooltip = document.body.appendChild(tooltip);
tooltip.style.position = "absolute";
element.onmouseover = over;
element.onmouseout = out;
element.onmousemove = move;
over();
};
window.XBTooltip = window.XBT = XBTooltip;
})(this, this.document);
</script>

Body

<p align="center"><a href="..............pdf" onMouseOver="XBT(this, {id:'tt1'})">
<img src="http://www.html.de/images/real.gif" width="373" height="36" border="0" class="padding">
</a>
<div id="tt1" align="top" class="xbtooltip"><br><br>

</div

 

[threadi]

Wenn es dir darum geht etwas über dem Mauszeiger anzeigen zu lassen, also so dass der Benutzer statt des Mauszeigers dein Flyout sieht, dann geht das nicht.

Wenn es dir darum geht das Flyout in seiner Position relativ zum Mauszeiger zu verschieben, dann ergänze im CSS noch die Eigenschaften top, left, right und/oder bottom (je nachdem wohin es soll).

 

[JayReDee]

über was denn {align:top;} ????

 

[threadi]

align gibt es nicht als CSS-Eigenschaft. Was meinst Du?

 

[JayReDee]

Ich meine welche CSS eigentschaft ich nehmen muss um das von der maus aus nach oben auszurichten

 

[threadi]

Hab ich doch geschrieben:

dann ergänze im CSS noch die Eigenschaften top, left, right und/oder bottom (je nachdem wohin es soll).

 

[JayReDee]

ja aber womit soll ich top definieren ?

 

[threadi]

Da du in deinem Code-Wust schon JavaScript einsetzt, kannst Du es auch über JavaScript machen. Oder per CSS.

 

[JayReDee]

mensch lässt du mich Zappeln ^^

kenne mich ehrlich gesagt nicht so gut aus und bräuchte schon den code :S

 

[JayReDee]

wäre praktisch wenn den jemand posten könnte

 

[sysop]

such mal nach wz_tooltip.js von walter zorn

eine einstellung lautet:
var ttAbove = false; // tooltip above mousepointer? Alternative: true