✔ Tooltip-Box immer an gleicher Stelle

H

hinkel11

Mitglied
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, also eine Art Tooltip-Box.

Was ich gern hätte wäre, dass diese Box immer an gleicher Stelle erscheint.
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 regeln 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.
 
Hi,

ohne jetzt das Markup und seine CSS-Formatierung im einzelnen zu kennen, würde ich aus dem Bauch heraus sagen, dass du außerhalb der Tabelle eine Box benötigst, in der die Infos ausgegeben werden.

Dafür wirst du dann aber zusätzlich JS benötigen, was das Anzeigen der jeweiligen Infos in dieser Box betrifft.

mfg Maik
 
So, hab das Modell mal kurz nachgebaut, und es funktioniert :)

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-02-26">
<title>tutorials.de | demo_hinkel11</title>

<style type="text/css">
<!--
td span {
display:none;
}

td:hover span {
display:block;
position:absolute;
right:10px;
top:10px;
background:yellow;
font-weight:bold;
}
-->
</style>

</head>
<body>

<table border="1">
       <tr><td>Text 1<span>Blindtext 1</span></td></tr>
       <tr><td>Text 2<span>Blindtext 2</span></td></tr>
       <tr><td>Text 3<span>Blindtext 3</span></td></tr>
</table>

</body>
</html>


mfg Maik
 
Ich hab das mit dem Code von dir soweit hinbekommen. Allerdings ist der obere Rand von der Tooltip-Box nun mit einer schwarzen Linie begrenzt. Ich hab schon den ganzen CSS-Code nach irgendwas wie "border-top: #000000" durchgeschaut, ist aber nichts zu finden. Ich hab keine Idee wo dieser schwarze Oberrand herkommt. Eine Idee?
 
Da in meinem Beispiel die Tooltip-Box lediglich mit einem gelben Hintergrund dargestellt wird, wirst du mir hier schon mit deinem Quellcode auf die Sprünge helfen müssen, denn hellsehen kann ich nicht :-)

mfg Maik
 
Also, das zuvor beschriebene Problem scheint nun gelöst.
Allerdings ist nun ein anderes Problem da.....

Die Seite auf der der Tooltip erscheint lautet "http://sccg09.cockerspaniel-gehren.de/index.php?option=com_content&view=article&id=57:chronik&catid=34:mannschaft" (einfach über eine Zahl in der Tabelle fahren damit der Tooltip zu sehen ist). Klappt ja soweit auch inwzischen so wie ichs möchte, nur wenn man jetzt oben im Menü auf die Seite "Team" geht und sich dort den Tooltip anschaut (über eines der Bilder dort fahren) haut da irgendetwas nicht hin. Ich denke das Problem besteht zwischen dem was bei "span:hover span {...}" und ".tooltip span span{...}" drinsteht. Ich befürchte dass sich die verschiedenen Abstandabgaben gegenseitig in die Quere kommen.

Ich poste den zugegebenermaßen etwas suspekten CSS-Code hier mal:

/* CSS Document */

.abstand {
margin: 30px;
}


span span {
display:none;
}

span:hover span {
display:block;
position:absolute;
right:1100px;
top:155px;
}




a.tooltip{
/* border-bottom: 1px dashed green; */
text-decoration: none;
}

a:hover.tooltip{
padding: 0;

}

.tooltip:hover span span{
display: block;
}

.tooltip span{
position: absolute;
text-decoration: none;
}

.tooltip span span{
display: none;
position: absolute;
background-color: #000000;
border: 1px solid #3a3a3a;
/* padding: 10px; */
color: black;
text-decoration: none;
width: 200px;
opacity: 0.9;
-moz-border-radius:3px;
bottom: 100px;
/* top: -20px; */
left: 60px;
}

.table {
background-color: #ffffff;
font-size: 11px;
font-weight: 100;
position: relative;
/* border: 1px solid #000000; */
}

DIV.shadow5 IMG {
border: 0px solid #666;
/* margin: -2px; */
display:block;
position: relative;
/* top: -3px; */
/* left: -3px; */
-moz-opacity:0.67;
}

DIV.shadow5:hover IMG {
/* margin: -1px; */
/* top: -1px; */
/* left: -1px; */
-moz-opacity:1;
}
 
Moin,

vergleich mal den HTML-Code der Tooltips auf beiden Seiten miteinander - die stimmen nämlich nicht überein.

Außerdem dürfen in einem Inline-Element (a,span) keine Blockelemente (div,table) enthalten sein - siehe hierzu die HTML-Referenz für Inline-Elemente.

Außerdem solltest du eine Schichtposition für die Tooltips einrichten, damit sie in der "Team"-Seite nicht hinter (unter) den Menübuttons liegen.

mfg Maik
 
Ausrichtung Tooltip-Box

Ich würde auf der unten angegebenen Seite, den Tooltip (mit Maus über irgendeine Zahl fahren damit Tooltip erscheint) gern wie folgt ausrichten:

- Tooltip soll mittig über der Tabelle erscheinen
- Größe des Tooltips soll sich an Inhalt, also Text, anpassen
-Zwischen Tooltip und Tabelle sollte ein kleiner Abstand sein

Hab diesen Tooltip nun nach langem Hin und Her nun per Java eingebunden, komme mit der Formatierung allerdings nicht klar, d.h. ich weis nicht genau woher der Tooltip weiß das er links oben über der Tabelle erscheinen muss usw.). Ich bin für jede Hilfe dankbar.

Hier die Seite: "http://sccg09.cockerspaniel-gehren.de/index.php?option=com_content&view=article&id=62:chronik&catid=34:mannschaft"

Hier der Code:

//CSS-Code//
#tooltip{
width:200px;
height:100px;
border:1px solid black;
background:#FFFFff;
display:block;
white-space:nowrap;
}
#datable{
}

//Java//
<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>

Der Code im Body sollte erst mal uninteressant sein, da ich dies eigentlich über CSS regeln möchte und da ich mit Joomal arbeite der CSS Code ja in einer separaten Datei liegt.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück