html Input hinter div

[koma666]

also ich hab eine seite it nen haufen input und select boxen, und ich möchte eine art tooltip einblenden onmouseover, wenn ich das jetzt aber mache, dann liegt das div tag (position:absolute;visibility:hidden)
wenn ich es sichtbar mache hinter den select boxen (zorder)
wie bekomm ich das in den vordergrund?

kennt jemand das problem?

 

[Daniel Mannheimer]

ich würd mir gern mal die seite anschauen. link bitte

 

[Christoph]

leg die selec-box auch in einen Layer und erhöhe den Z-Index des anderes Layers

 

[koma666]

die seite ist von aussen unzugänglich in unserem intranet, sorry.
aber hier ein beispiel.

<div>
<select style="z-index:0; WIDTH: 861px; HEIGHT: 234px" size=10 multiple><option>hinter dieser selectbox ist ein gelb hinterlegter tooltip</option></select>
</div>
<div style="z-index:100;position:absolute;top=10;left=620;background-color:ffffaa;border:1px solid black;color:black;padding:5">
Hallo dies ist der tolle<br>testtext, mit dem ich<br>sehen will ob das<br> div hier immernoch<br>hinter der selectbox liegt
<div>

 

[Andreas Gaisbauer]

Ich hab mal ein richtig gutes Tooltip Script gefunden. Credits kann ich leider keine geben, da ich echt nicht mehr weis wo ich das teil her hab


das alles in den Head - logisch

<style type="text/css"> 
<!--
#tooltip {
	position: absolute;
	visibility: hidden;
	border: 1px solid;
	padding: 3px 5px;
	background: #fff;
	margin: 0;
	font: 11px/13px verdana,arial,sans-serif;
}
-->
</style>
<script type="text/javascript"><!--

// well here it is. the script. use it as you will. or not at all.
// paul

if(!document.getElementById) { window.location.href = "http://webstandards.org/upgrade/"; }

window.onload = function(e) {
  if(document.createElement) tooltip.d();
}

tooltip = {

  t: document.createElement("div"),
  c: null,
  g: false,
  
  m: function(e) {
    if(tooltip.g) {
      x = window.event ? event.clientX + document.body.scrollLeft : e.pageX;
      y = window.event ? event.clientY + document.body.scrollTop  : e.pageY;
      tooltip.a(x,y);
    }
  },

  d: function() {
    tooltip.t.setAttribute("id","tooltip");
    document.body.appendChild(tooltip.t);
    a = (document.all) ? document.all : document.getElementsByTagName("*");
    for(var i=0; i<a.length; i++) {
      if(a[i].getAttribute("title")) {
        a[i].setAttribute("text",a[i].getAttribute("title"));
        a[i].removeAttribute("title");
        if(a[i].getAttribute("alt") && a[i].complete) a[i].removeAttribute("alt");
        tooltip.l(a[i],"mouseover",tooltip.s);
        tooltip.l(a[i],"mouseout",tooltip.h);
      } else if(a[i].getAttribute("alt") && a[i].complete) {
        a[i].setAttribute("text",a[i].getAttribute("alt"));
        a[i].removeAttribute("alt");
        tooltip.l(a[i],"mouseover",tooltip.s);
        tooltip.l(a[i],"mouseout",tooltip.h);
      }
    }
    document.onmousemove = tooltip.m;
  },

  s: function(e) {
    d = (window.event) ? window.event.srcElement : e.currentTarget;
    tooltip.t.appendChild(document.createTextNode(d.getAttribute("text")));
    tooltip.c = setTimeout("tooltip.t.style.visibility = 'visible';",500);
    tooltip.g = true;
  },

  h: function(e) {
    tooltip.t.style.visibility = "hidden";
    if (tooltip.t.firstChild) tooltip.t.removeChild(tooltip.t.firstChild);
    clearTimeout(tooltip.c);
    tooltip.g = false;
    tooltip.a(-99,-99);
  },

  l: function(o,e,a) {
    if(o.addEventListener) o.addEventListener(e,a,true);
    else if(o.attachEvent) o.attachEvent("on"+e,a);
    else return null;
  },

  a: function(x,y) {
    tooltip.t.style.left = x + 8 + "px";
    tooltip.t.style.top  = y + 8 + "px";
  }

}

< /script >

den jeweiligen ToolTip gibst du dann im Dokument als "Titel" Tag ein

<h2 title="tooltip">tooltip</h2>
<span title="hello">this</span>

usw...




CU Andreas
-------------------------------------------------------------
"There are only 10 types of people in the world, those that understand binary, and those that don't."