Hinweisfensterchen

[apsel]

Om nah hoo pez nyeetz,

wenn man mit der Maus über einen Link oder irgendein Element, welches einen Titel bekommen hat, fährt, öffnet sich am Mauszeiger ein kleines Popup. Damit ich weiß wonach ich suchen muss, möchte ich wissen, wie diese Fensterchen richtig heißen. Ich möchte sie nämlich per CSS beeinflussen (Schriftart, Breite) falls dies möglich ist.

Matthias

[Felix Riesterer]

Lieber apsel,

Damit ich weiß wonach ich suchen muss, möchte ich wissen, wie diese Fensterchen richtig heißen.

man nennt das Tooltip.

Ich möchte sie nämlich per CSS beeinflussen

Ist unmöglich.

Liebe Grüße,

Felix Riesterer.

[apsel]

Om nah hoo pez nyeetz,

man nennt das Tooltip.

Danke

Ich möchte sie nämlich per CSS beeinflussen

Ist unmöglich.

Schade, gibts ne andere Möglichkeit?

Matthias

[Felix Riesterer]

Lieber apsel,

Du könntest etwas in der Art wie Ingos Infobox ausprobieren.

Liebe Grüße,

Felix Riesterer.

[Malcolm Beck´s]

hi,

Ist unmöglich.

Es ist bedingt möglich.
In einigen Browsern kann man mittlerweile per CSS generierten Content wie Tooltips (unten stehen einige Testergebnisse) nutzen; um mein Bsp. mit dem Title-Attribut zu nutzen, muss man nur an einer stelle etwas anpassen.

a:hover:after {  
  content: attr(title);  
}

Da in naher Zukunft höchstwahrscheinlich nur der IE damit ein Problem haben wird, werde ich in Zukunft nur noch diese Variante vorziehen (wenn überhaupt), da man hier für sein Markup nicht einsauen muss, sofern alles Korrekt ausgezeichnet ist.

mfg

[apsel]

Om nah hoo pez nyeetz,

In einigen Browsern kann man mittlerweile per CSS generierten Content wie Tooltips (unten stehen einige Testergebnisse)

Sieht gut aus. Ich werd das mal für mich probieren. Ich habe deine Seite übrigens mal im IE8 geöffnet: Im Quirksmodus und in der IE7-Emulation werden die Tooltips nicht angezeigt.

Matthias

[Malcolm Beck´s]

hi,

Om nah hoo pez nyeetz,

Dito.

Ich habe deine Seite übrigens mal im IE8 geöffnet: Im Quirksmodus und in der IE7-Emulation werden die Tooltips nicht angezeigt.

Ich schrieb ja

Da in naher Zukunft höchstwahrscheinlich nur der IE damit ein Problem haben wird,

Funktioniert es denn mit dem IE 8er im Standard-Modus (hab gerade keinen zur Hand und keine Lust, zur arbeit zu gehen, wo ich einen hätte :))?

Jedenfalls, da du den Elementen, um die es hier geht, ja sowieso ein Title-Attribut mit auf den weg gibst, spricht nichts gegen diese Variante, denn der Inhalt ist in jedem Fall verfügbar, selbst in den älteren IEs; Moderne Browser bekommen es einfach nur in aufgepeppter Form vorgesetzt.

Ich finde die Infobox (mit einem a-Element und verstecktem Content umgesetzt), jetzt, im nachhinein betrachtet, für einen falschen Ansatz.
Entweder ist die Info, die man einblenden will, so wichtig, dass sie erst garnicht ausgeblendet gehört (man könnte es in Klammern und <small> hinter den betreffenden Begriff schreiben, so wie ich jetzt hier (aber ohne <small>)), oder es ist eine zusätzliche Info für eine Abkürzung, eine kleine Anmerkung oder eine kurze Beschreibung eines Fachwortes, wo es dann in einem Title-Attribut gut aufgehoben ist.
Das Problem mit der Infobox ist, dass man sich sein HTML zumüllen muss, um eine Funktionalität nachzuahmen, die eh in den Browsern Integriert ist.

mfg

[Malcolm Beck´s]

hi,

Ich habe deine Seite übrigens mal im IE8 geöffnet

Ich jetzt auch :)

Ich habe das ganze auch ein wenig überarbeitet, da mir meine Idee ausgesprochen gut gefällt, und jetzt funktioniert es auch mit dem IE 8 (allerdings nur im Standard-Modus).

„Infobox“, 21st Century Style

mfg

[Felix Riesterer]

Lieber Malcolm X,

„Infobox“, 21st Century Style

schon gebookmarked. ;-)

Liebe Grüße,

Felix Riesterer.

[Malcolm Beck´s]

hi Felix,

„Infobox“, 21st Century Style

schon gebookmarked. ;-)

Dann löschen und ändern, bitte[1] :)

mfg
[1] Evtl. noch mal antesten, da ich noch nicht dazu kam -- Firefox schaut's Suppi aus

[Kai345]

[latex]Mae  govannen![/latex]

Dann löschen und ändern, bitte[1] :)

Zum Testen ist folgendes nicht gut: Die Breiten der beiden grauen Boxen sind fix, daher kann man nicht testen, wie sich deine Infobox in fluid -layouts verhält, wenn der Text unterschiedlich umbricht.

Cü,

Kai

[Malcolm Beck´s]

hi,

Dann löschen und ändern, bitte[1] :)

Zum Testen ist folgendes nicht gut: Die Breiten der beiden grauen Boxen sind fix, daher kann man nicht testen, wie sich deine Infobox in fluid -layouts verhält, wenn der Text unterschiedlich umbricht.

Nein, die umschliessende Box war Fix, die hatte ich auf 60 em gesetzt, habe ich wieder auf % geändert.
Die grosse Box hat jetzt 90%, die kleinen jeweils 42%; heute Abend mach ich noch ein Komplettes Dummy-Layout dazu, dann kann man es unter Realen bedingungen testen.

mfg

[apsel]

Om nah hoo pez nyeetz,

ausgehend von Malcolm Beck´s Überlegungen habe ich den Infobox umgesetzt. Das hat mir so gut gefallen, dass ich meinen ersten Artikel zur HTML/CSS-Problematik geschrieben habe. Ich bitte um freundliche Beachtung und Anmerkungen.

Hier der Link zum Artikel.

@Malcolm Beck´s: Wie möchtest du referenziert werden?

Matthias

[Malcolm Beck´s]

hi,

Das hat mir so gut gefallen, dass ich meinen ersten Artikel zur HTML/CSS-Problematik geschrieben habe. Ich bitte um freundliche Beachtung und Anmerkungen.

Sieht Ok aus, nur musst du es leider überarbeiten.
Ich habe mir jetzt gerade Opera 10.10 und Chrome installiert, in beiden funktioniert die überarbeitete Version, zumindest bei mir, Tadellos.

@Malcolm Beck´s: Wie möchtest du referenziert werden?

„N-fobox“, 21st Century Style

wäre schön :)
Die N-Serie soll möglichst einheitlich bleiben :)

mfg

[apsel]

Om nah hoo pez nyeetz,

... ist, dass das "nackte" beispiel3 aus meinem Artikel in allen aktuellen Browsern funktioniert ebenso wie der ursprüngliche noch in Arbeit befindliche Anlass sich überhaupt damit auseinanderzusetzen.
Das Problem mit der Unterstreichung stellt sich bei den Brückentagen nicht, da diese dort mit border realisiert wurden.

(Für Neuleser: Opera möchte meine Tooltipps aus dem Artikel Kapitel 6 und 7 nicht anzeigen.)

Matthias

[Kai345]

[latex]Mae  govannen![/latex]

(Für Neuleser: Opera möchte meine Tooltipps aus dem Artikel Kapitel 6 und 7 nicht anzeigen.)

Doch doch, Opera zeigt die schon an, aber außerhalb des sichtbaren Bereiches. Nimm mal Malcolm Beck´s' Beispiel, verändere die Fenstergröße und hovere über die einzelnen Links.  Nun mach das ganze mehrmals bei einer anderen Position des Scrollbars. Du wirst sehen, daß sich die relative Position der Infobox zu den zugehörigen Links verändert. Irgendwann ist der Inhalt dann außerhalb.

Ist ein uralter Bug (mMn), keine Ahnung, ob die den mal reparieren. Ich habe da auch schon Stunden mit verbracht und für meine Zwecke eine Lösung gefunden[1], allerdings baut sich meine Box anders auf, ich muß da mal einen Test mit :before u. :after nach deinem Beispiel aufsetzen, um zu sehen, ob ich es mit 'meiner' Methode hinbekomme.

Cü,

Kai

[1] http://js.knrs.de/lookup/, die roten Fragezeichen (Achtung, bei "Javascript ein" sind die Infoboxen leicht verzögert)

[Kai345]

[latex]Mae  govannen![/latex]

(Für Neuleser: Opera möchte meine Tooltipps aus dem Artikel Kapitel 6 und 7 nicht anzeigen.)

Ist ein uralter Bug (mMn), keine Ahnung, ob die den mal reparieren.

In Opera 10.50 werden die Infos übrigens angezeigt.

Cü,

Kai

[Kai345]

[latex]Mae  govannen![/latex]

Ist ein uralter Bug (mMn), keine Ahnung, ob die den mal reparieren.

wenn man in tooltipp-X:hover:before die CSS-Regel bottom: 1em; jeweils auskommentiert, werden die Infos angezeigt, natürlich jetzt nicht mehr korrekt plaziert. Ich versuche es weiter.

Cü,

Kai

[Malcolm Beck´s]

hi,

Nun mach das ganze mehrmals bei einer anderen Position des Scrollbars. Du wirst sehen, daß sich die relative Position der Infobox zu den zugehörigen Links verändert. Irgendwann ist der Inhalt dann außerhalb.

Die Lösung ist sehr Simpel.
Opera scheint ein Problem mit den Angaben zu top und bottom zu haben, schreibe einfach margin vor die jeweiligen Eigenschaften und et voilà.

Das Dumme an der Sache, damit hat nun Firefox ein Problem, der benötigt top oder bottom.

Da Firefox weiter verbreitet ist, wäre eine mögliche Lösung, für Opera einfach top und bottom mittels Javascript zu ersetzen, oder gibt es einen hack für Opera?

mfg

[Malcolm Beck´s]

hi,

Die Lösung ist sehr Simpel.
et voilà.

;)

Es scheint, als ob nur Firefox die Eigenschaft top benötigt, also bekommt auch nur Firefox die Eigenschaft top mit dem passenden FF-Hack (mir wäre ein Opera-Hack lieber, leider hat der aber anscheinend keinen (obwohl Opera es ja Definitiv nötiger hätte!)).

Ich habe Fertig.

mfg

[apsel]

Om nah hoo pez nyeetz,

Die Lösung ist sehr Simpel.
et voilà.

Sieht gut aus, beantwortet aber nicht die Frage, warum Opera nur mit dem Artikel ein Problem hat, nicht jedoch mit dem standalone-Beispiel, obwohl beide identisch umgesetzt sind.

Matthias

[apsel]

Om nah hoo pez nyeetz,

Ebenso spannend finde ich, dass Opera die Tooltipps anzeigt (und sogar an der richtigen Stelle, wenn man die Seite auf 20% verkleinert.

Matthias

[Kai345]

[latex]Mae  govannen![/latex]

Sieht gut aus, beantwortet aber nicht die Frage, warum Opera nur mit dem Artikel ein Problem hat, nicht jedoch mit dem standalone-Beispiel, obwohl beide identisch umgesetzt sind.

Doch, da tritt der gleiche Effekt auf, sobald man die Fensterhöhe soweit herunterschraubt, daß Scrollbalken vorhanden sind.

Cü,

Kai

[apsel]

Om nah hoo pez nyeetz,

An diesem standalone-Beispiel konnte ich das seltsame Opera-Verhalten nicht reproduzieren.

Matthias

[Malcolm Beck´s]

hi,

An diesem standalone-Beispiel konnte ich das seltsame Opera-Verhalten nicht reproduzieren.

Wenn du nicht weisst, warum diese Version funktioniert, hast du per Zufall einen Bug gefunden :)

Entferne bei

  
.erlaut, .effektiv                                    /* Erläuterungen */  
{  cursor:               help;  
   position:             relative;  
   border-bottom:        1px dotted blue;  
   display:              inline-block;  
}

die display-Eigenschaft, dann hast du den Fehler wieder; ich muss jetzt was im RL erledigen, bin heute Abend wieder hier, bis dahin kannst du ja versuchen, deine weiter oben an mich gestellte Frage zu lösen (wobei sich das erledigt hat, wenn dein hier verlinktes Bsp. in allen Relevanten Browsern funktioniert).

Lerne debugging, reduziere deine Beispiele auf das minimum (funktionierende und defekte) und versuche alles zu reproduzieren, was wo passiert; nur so kannst du lernen.

mfg

[apsel]

Om nah hoo pez nyeetz,

Lerne debugging, reduziere deine Beispiele auf das minimum (funktionierende und defekte) und versuche alles zu reproduzieren, was wo passiert; nur so kannst du lernen.

Du hast natürlich recht, dass das Beispiel ziemlich ungeeignet ist, aber das war ja ursprünglich auch nicht als Beispiel gedacht, sondern es ist halt die erste Seite, bei der ich diese Tooltipps einsetzen möchte.

Die Display-Eigenschaft ist tatsächlich der Auslöser. Inline-block verändert eine ganze Menge:

In diesem Beispiel werden in Opera die Tooltipps nicht mehr ausgeblendet und Firefox vererbt jetzt auch die Unterstreichung wie die anderen Browser auch.

Verwendet habe ich inline-block allerdings aus einem ganz anderen Grund: nämlich um die Breite der Blockelemente, die einen Tooltipp enthalten, auf ihren eigenen Platzbedarf zu begrenzen.
Ich wollte eben nicht <h2><span class="erlaut">Heilige Drei Könige</span></h2> schreiben.
Matthias

[apsel]

Om nah hoo pez nyeetz,

die überarbeitete Version des Tutorials ist online. (Tutorial)

Matthias

[Malcolm Beck´s]

hi,

die überarbeitete Version des Tutorials ist online. (Tutorial)

Du könntest, um dein Tutorial abzurunden, noch eine Seite erstellen, wo man den Praktischen Einsatz Live beobachten kann; unter den jetzigen Bedingungen in deinem Bsp. kann ein Potentieller nutzer nicht abschätzen, wie sich die Infobox auf seiner Seite verhält.

Am unteren Bsp. sieht man schon eine Potentielle Schwachstelle, die du zusätzlich verschleiert hast, in dem der aus der Box ragende Content abgeschnitten wird (overflow:hidden;).
Das ist gerade bei solchen Artikeln immer wichtig, denn wer auf deiner Seite schlechte Erfahrungen macht, kommt selten wieder.

mfg

[apsel]

Om nah hoo pez nyeetz,

Du könntest, um dein Tutorial abzurunden, noch eine Seite erstellen, wo man den Praktischen Einsatz Live beobachten kann; unter den jetzigen Bedingungen in deinem Bsp. kann ein Potentieller nutzer nicht abschätzen, wie sich die Infobox auf seiner Seite verhält.

Gute Idee!

Am unteren Bsp. sieht man schon eine Potentielle Schwachstelle, die du zusätzlich verschleiert hast, in dem der aus der Box ragende Content abgeschnitten wird (overflow:hidden;).

verschleiert?? ne, extra so gemacht um auf eine potentielle Schwachstelle hinzuweisen. Deshalb heißt ja die Überschrift auch "Nachteiliges".

Das ist gerade bei solchen Artikeln immer wichtig, denn wer auf deiner Seite schlechte Erfahrungen macht, kommt selten wieder.

ACK!

Matthias

[Malcolm Beck´s]

hi,

Sieht gut aus, beantwortet aber nicht die Frage, warum Opera nur mit dem Artikel ein Problem hat

Der Kai345 hat dieses Problem mehrmals angedeutet; ich habe deine Seite bei mir Lokal getestet und kann bestätigen, dass es daran liegt.
Wie gesagt, mein letztes Bsp. berücksichtigt dieses Problem und löst es, soweit ich das beurteilen kann.

mfg

[Kai345]

[latex]Mae  govannen![/latex]

Der Kai345 hat dieses Problem mehrmals angedeutet;

Rate mal, weshalb ich von deiner Seite eine fluid-Version wollte ;) Das Problem ist mir leider wohlbekannt.

Wie gesagt, mein letztes Bsp. berücksichtigt dieses Problem und löst es, soweit ich das beurteilen kann.

Deine N-foBox hat allerdings noch einen kleinen Fehler: Ich hab mal ein ziemlich schmales Fenster genommen, da passiert das hier:

http://knrs.de/tmp/mb_infobox.JPG

Wie du siehst, wird die Box rechts abgeschnitten. Vielleicht reicht schon ein entsprechender z-Index beim Hovern, hab das jetzt nicht getestet. Ist noch zu früh am Morgen :)

Cü,

Kai

[Malcolm Beck´s]

hi,

Rate mal, weshalb ich von deiner Seite eine fluid-Version wollte ;) Das Problem ist mir leider wohlbekannt.

Früher oder später fällt jeder Groschen :)

Deine N-foBox hat allerdings noch einen kleinen Fehler:

Bitte, wir wollen doch bezüglich Opera keine Dippelschisser sein :)

http://knrs.de/tmp/mb_infobox.JPG

Wie du siehst, wird die Box rechts abgeschnitten. Vielleicht reicht schon ein entsprechender z-Index beim Hovern, hab das jetzt nicht getestet. Ist noch zu früh am Morgen :)

Das habe ich schon gesehen; das ist ein völlig Absurdes verhalten, was Opera an den tag legt, völlig Sinnlos.
Die Box hat weder eine overflow-Eigeschaft, noch sonst was. Das Lustige ist, direkt über dieser Box ist ein Link, dessen hover:content angezeigt wird, aber beim verlassen mit der Maus rückstände hinterlässt?
Z-index kannste den links auch nicht geben, da sonst der eingeblendete Content an anderen stellen Probleme macht; aber ich denke, ich lasse es erst mal so, soweit funktioniert es ja sehr gut in den wichtigen Browsern, die kleine Macke im Opera kann ich hinnehmen (kann das ding eh nicht ab, hat noch nicht mal einen Adblocker :)).

mfg

[Kai345]

[latex]Mae  govannen![/latex]

Das habe ich schon gesehen; das ist ein völlig Absurdes verhalten, was Opera an den tag legt, völlig Sinnlos.
Die Box hat weder eine overflow-Eigeschaft, noch sonst was. Das Lustige ist, direkt über dieser Box ist ein Link, dessen hover:content angezeigt wird, aber beim verlassen mit der Maus rückstände hinterlässt?

Ja, das hängt alles irgendwie zusammen. Deshalb habe ich auch lange getüftelt, um meinen Infoboxen diesen Fehler nicht mitzugeben :)

Z-index kannste den links auch nicht geben, da sonst der eingeblendete Content an anderen stellen Probleme macht; aber ich denke, ich lasse es erst mal so, soweit funktioniert es ja sehr gut in den wichtigen Browsern, die kleine Macke im Opera kann ich hinnehmen

Da die neueste beta des weltbesten Browsers *hehe* den Fehler nicht mehr zu haben scheint und Opera-Nutzer zum größten Teil die aktuellste Version nutzen, wird der Fehler eh in absehbarer Zeit hinfällig.

Cü,

Kai

[apsel]

Om nah hoo pez nyeetz,

Wie gesagt, mein letztes Bsp. berücksichtigt dieses Problem und löst es, soweit ich das beurteilen kann.

Kannst du mal bitte sagen, was *genau* das Problem löst?

Matthias

[apsel]

Om nah hoo pez nyeetz,

Das war keine Kritik. In der Liste der getesteten Browser war nur kein IE vorhanden und da hab ich mir gedacht, ich teste das mal für dich.

Matthias

[Malcolm Beck´s]

hi,

Das war keine Kritik.

Sorry, Missverständnis. Meine Kritik war nicht auf dich oder dein Posting bezogen, sondern einfach Frei Schnauze raus, was ich von diesen Infoboxen halte (die ich auch seit langem benutze, nur hat sich mit der Zeit meine Meinung dazu geändert).

Es gab übrigens ein Update, das gerne getestet werden würde; wer so Frei ist.
Ich hab zurzeit nur einen Firefox zur Hand, und der macht alles Tutti.

mfg