Tooltipps mit HTML CSS und Javascript

Dave

Geht um folgendes Script:
http://www.2jesus.de/online-bibel/bibel ... eus-1.html

Das ist eine Interlinear-Übersetzung des neuen Testaments (wie man sieht bin ich noch nicht weit gekommen) da soll per Mousover auf die Wörter die Übersetzung angezeigt werden...

Quelltext CSS:

Code:

a.tooltipp, .tooltipp
{
   position: relative;
}


a.tooltipp span
{
   display: none;
}

a.tooltipp:hover span
{
   width: 300px;
   font: 8pt "Trebuchet MS", sans-serif;
    position: absolute;
   top: 30px;
   left: 30px;
   display: block;
   z-index: 999;
   background: #e6ecff;
   border: 1px solid #003399;
   padding: 3px;
}

Quelltext HTML:

Code:

<a href="#" class="tooltipp">βιβλοσ<span>βιβλοσ [biblos]<br /><br />
Buch, geschriebenes Buch, Rolle, Schriftrolle, Register</span></a>

Funktioniert wunderbar nur schimmern die Links immer durch (anderer Text nicht)...

Hab keinen Plan woran das liegt...

Gruß, Dave

MarkusHausB · **Registriert:** 19.07. 2003, 02:50 **Beiträge:** 119

Moin,

wenn ich in den Quelltext sehe, sehe ich da aber unter "a.tooltipp:hover span" noch 2 zusätzliche Attribute zwinkernd

Grüße

Dave

Da ich mir dachte dass dieser Kommentar kommt (weil ich selber erst dachte, dass die Ursache hier läge), habe ich das hier weggelassen. Die ändern nämlich nichts daran...

Bin auch mittlerweile soweit, dass es im FF einfwandfreifunktioniert, wenn ich BEIDEN Klassen einen z-index verpasse. Der IE stellt sich allerdings immer noch quer.

Gruß, Dave

MarkusHausB · **Registriert:** 19.07. 2003, 02:50 **Beiträge:** 119

Also,

aktuell ist es im FF bei mir immer noch transparent.
Ich habe mit der FF-Webdeveloper-Toolbar das CSS bearbeitet und die beiden opacity Angaben entfernt. Danach waren die Tooltips nicht mehr transparent.
Die opacity-Eigenschaft ist doch genau dafür gedacht, transparenzen zu erzeugen.

Grüße

Dave

Das Problem ist aber, dass das Fenster ZU transparent ist. In Bezug auf die Links der Mutterklasse nämlich immer 100%:

Dateianhang:

Dateikommentar: Screenshot

screenshot.png [ 109.36 KB | Zugriffe 135-mal ]

Und dabei ist es vollkommen egal was bei opacity eingestellt ist. Auch wenn ich es komplett weglasse, reagiert der Browser immer so, als würden die Links direkt in der Box stehen, was den Text natürlich entsprechend unleserlich macht (siehe Screenshot)... Am besten einfach mal im IE(6) anschauen.

Gruß, Dave

michri · **Registriert:** 26.06. 2007, 17:37 **Beiträge:** 7

Mahlzeit
du solltest folgende Zeilen Hinzufügen:

Code:

A.tooltipp{
 z-index:1;
}

A.tooltipp:hover{
 z-index:2;
}

Dann klappts auch mit dem IE zwinkernd

Erklärung
IE macht es IMHO richtig:
alle a.tooltipp s sind auf einem Level und jeder Link bildet einen "stacking context". Dadurch ist eine Angabe wie

Code:

a.tooltipp:hover span{z-index:1000}

absolut unnötig, denn es schiebt den span nur vor alle anderen spans innerhalb des a.tooltipp s.
Die nachfolgenden Links sind durch ihre Source-order später zu zeichnen, also "on top".
Was du brauchst ist eine Anhöhung des Links im "stacking-contextes" des ganzen textes.
also erstmal alle auf ein definiertes Niveau:

Code:

A.tooltipp{
 z-index:1;
}

Dann, bei hover, den jeweiligen Link nach vorne:

Code:

A.tooltipp:hover{
 z-index:2;
}

und voila...

mfg
Christian

Dave

Wie schon oben gesagt, funktioniert das mit dem z-index nicht...

michri · **Registriert:** 26.06. 2007, 17:37 **Beiträge:** 7

Hallo
Das stimmt, wenn man ihn falsch einsetzt ist der Z-Index auch sinnlos, wenn du zum beispiel
den Span im a.tooltipp an die oberste position setzt sind die anderen a.tooltipps noch lange nicht dahinter...
les dir doch bitte einmal meine Erklärung ganz durch und probier es aus.

mfg
Christian

Dave

Ich habs ausprobiert... Ich habs dann nur wieder rückgängig gemacht weil es dann in beiden Browsern nicht ging... Aber vielleicht habe ich auf was falsch verstanden.

Bin aber eh gerade am überlegen ob eine Javascript-Lösung nicht doch der bessere Weg ist - die CSS-Engine mit Mous-Over ist im IE so dermaßen lahmarschig, dass es nicht wirklich Spaß macht.

michri · **Registriert:** 26.06. 2007, 17:37 **Beiträge:** 7

Komisch, bei mir (IE 7,Opera,FF 2) funktionierts:
http://www.ec-minden.de/labs/interlinear.htm
ansonsten kannst du ja JS mit HTTPxmlRequest machen, machts auch schmaler...
mfg
Christian

die Community für Webdesign, Ecommerce und Marketing

Das Forum für Webdesign, Ecommerce und Marketing

Tooltipps mit HTML CSS und Javascript

Wer ist online?