Tooltip-Box immer an gleicher Stelle

Unregistriert

Ich habe eine Tabelle die mit Zahlen gefüllt ist. Wenn man nun über eine Zahl mit der Maus fährt, soll eine Box oberhalb der Tabelle erscheinen, in der bestimmte Infos stehen.

Was ich ger hätte wäre, dass sich diese Box immer an gleicher Stelle öffnet.
Bisher hab ich es nur geschaftt, dass sich die Box relativ zur Tabellenzelle öffnet, d.h. bei Mouseover über erste Zelle öffnet sich die Zelle an einer bestimmten Position und bei Mouseover über nächste Zelle rechts öffnet sich die Box auch etwas weiter rechts wie bei erster Zelle.
Ich hab dies bisher versucht zu regln mit "position" (absolute, relative usw.), aber ohne Erfolg. Hat da jemand eine Idee? Wie gesagt, die Box soll per MouseOver immer an gleicher Stelle erscheinen, unabhängig von der Tabellenzelle. Danke im voraus.

synaptic

ja ohne code is des zwar machbar aber nicht auf dein problem zugeschnitten.. und wenn du alles im css richtig gemacht hast, kannste das ganze auch mit position:relative lösen..

eine andere variante wäre mit javascript.. dann bauste nur ein div über dem table und haust da mit

Code

document.getElementById("hier kommt die id vom DIV rein").innerHTML = "text";

den entsprechenden text rein

Unregistriert

Könntest du mir das mit der Java-Lösung nochmals genauer erklären, denn davon habe ich nun überhaupt keine Ahnung. Wo muss ich den diesen Code hinschreiben, in meine index.php? Oder muss ich eine neue java-datei anlegen? Wenn ja, was muss da standardmäßig noch so an Code drin sein neben deinem? Danke.

synaptic

JAVA ist NICHT!!!!! Javascript!

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de">
<head>
  <title></title>
  <script type="text/javascript">
  function writeTooltip(text){
  var target = document.getElementById("tooltip");
  target.innerHTML=text;
  target.style.visibility="visible";
  }
  function hideTip(){
  var target = document.getElementById("tooltip");
  target.style.visibility="hidden";
  }
  </script>
  <style type="text/css">
  #tooltip{
  width:200px;
  height:100px;
  border:1px solid black; 
  background:#FFFF99;
  display:block;
  }
  #datable{


  }
  </style>
</head>
<body>
<div id="tooltip"></div>
<table id="datable" border="1"  width="30%">
  <tr><!-- Row 1 -->
     <td><a href="#" onmouseout="hideTip();" onmouseover="writeTooltip('das hier ist eintooltip!');">text</a></td><!-- Col 1 -->
     <td><a href="#" onmouseout="hideTip();" onmouseover="writeTooltip('das hier ist eintooltip<br />mit umbruch!');">text2</a></td><!-- Col 2 -->
     <td><a href="#" onmouseout="hideTip();" onmouseover="writeTooltip('das hier ist eintooltip<br /> jaaa hier kann man html reinschreiben...<p>auch andere tags :o)</p>');">text3</a></td><!-- Col 3 -->
  </tr>
  <tr><!-- Row 2 -->
     <td>&nbsp;</td><!-- Col 1 -->
     <td>&nbsp;</td><!-- Col 2 -->
     <td>&nbsp;</td><!-- Col 3 -->
  </tr>
</table>




</body>
</html>

Alles anzeigen

Unregistriert

Vielen Dank für den ausführlichen Code. Nur muss ich noch dazusagen, dass ich mit Joomla arbeite, wo es ja eine index.php und eine templatename.css und die zusätzlichen gibt. Muss ich all das was im Head zwischen <script type> und </script> steht nun in meine index.php eintragen?

synaptic

jap
das css-zeugs kannste auch in die template.css stopfen

Tooltip-Box immer an gleicher Stelle

Tags

Benutzer online in diesem Thema