Gunther: IE 10 - hover über Title-Attribute

Hallo werte Selfgemeinde,

dass der IE egal in welcher Version immer auch so seine "Besonderheiten" hat, ist ja nichts Neues. Ich bin gerade mal wieder über so eine "Besonderheit" gestolpert ...!

Und zwar habe ich ein Drop-Down Menü welches u.a. per :hover entsprechende Untermenüs aufklappt, die die Links enthalten. Ganz brav habe ich meine Links im HTML-Code auch jeweils mit einem entsprechenden Title-Attribut ausgestattet, welches also nun beim Überfahren der Links mit dem Cursor als Tool-Tipp angezeigt wird.

Im IE (10) bleibt der Tool-Tipp nach seinem Erscheinen auch so lange stehen, dass man mit dem Cursor darüber fahren kann. Wenn man das tut, oder das passiert, klappt das Menü zu. Das heißt also, der Tool-Tipp "überlagert" das eigentliche Objekt und somit erkennt der Browser nicht mehr den Hover-Status.

Ein ziemlich "ärgerliches" Verhalten, gerade wenn etwas "unerfahrenere" Benutzer die Seite besuchen.

Ist euch das "Problem" auch schon mal aufgefallen?

Gibt es einen vernünftigen "Workaround"?

Im Firefox verschwindet der Tool-Tipp so schnell wieder, dass man ihn "nicht erwischt".
Und im Chrome bleibt er länger stehen und es passiert aber auch nichts, wenn man ihn mit dem Cursor überfährt. Das ist eigentlich das Verhalten, was man (ich) erwarten würde.

Gruß Gunther

  1. Es gibt etliche Wege hover-Infoboxen zu implementieren. Könntest du ein Onlinebeispiel zu deiner Lösung bereitstellen? jsfiddle.net

    Ich kann mir nicht vorstellen, dass es ein reiner IE-Bug ist.

    1. Hi!

      Es gibt etliche Wege hover-Infoboxen zu implementieren. Könntest du ein Onlinebeispiel zu deiner Lösung bereitstellen? jsfiddle.net

      Nein, es geht nicht um eine "eigene" Lösung, sondern um das Standardverhalten des Browsers im Bezug auf die Tool-Tipps.

      Ich habe jetzt trotzdem mal ein Fiddle erstellt, an dem du das beschriebene Verhalten testen kannst (die unterschiedlichen Browser vorausgesetzt).

      Anders als in meinem konkreten Fall, siehst du im IE 10 hier zwar auch kurz den Teil, der beim Hovern eingeblendet wird verschwinden, da sich der Cursor aber dann immer noch über der "auslösenden" Fläche befindet, wird der Text sofort wieder eingeblendet. Bei einem Menü ist das aber nicht der Fall, und das Menü somit zugeklappt.

      Ich kann mir nicht vorstellen, dass es ein reiner IE-Bug ist.

      Wie bereits geschrieben, tritt die Problematik im FF und in Chrome nicht auf. Mehr habe ich nicht getestet.

      Gruß Gunther

      1. Hier ist der "Effekt" besser zu sehen: http://jsfiddle.net/PVUqq/1/

        Gruß Gunther

        1. Meine Herren,

          Hier ist der "Effekt" besser zu sehen: http://jsfiddle.net/PVUqq/1/

          Jetzt versteh ich dein Problem erst. Mir fällt aber kein Weg ein, außer das Standard-Verhalten zu deaktivieren und selber was zu stricken. Schön is leider anders.

          Gerade mal beim W3C nachgeschaut, die machen keine Vorgaben oder Hinweise zum Rendering des title-Attributes. Deswegen besteht auch keine Hoffnung, dass die IE-Entwickler diesen vermeintlichen Bug jemals fixen werden.

          --
          Hey Girl,
          i wish you were asynchronous, so you'd give me a callback.
          1. Mein Herr!

            Hier ist der "Effekt" besser zu sehen: http://jsfiddle.net/PVUqq/1/

            Jetzt versteh ich dein Problem erst.

            Schön - manchmal ist es gar nicht so leicht, vermeintlich "einfache" Problemchen zu beschreiben, bzw. zu verdeutlichen! ;-)

            Mir fällt aber kein Weg ein, außer das Standard-Verhalten zu deaktivieren und selber was zu stricken. Schön is leider anders.

            Also per Javascript für IEs alle Title-Attribute in 'A' Elementen entfernen ...

            Gerade mal beim W3C nachgeschaut, die machen keine Vorgaben oder Hinweise zum Rendering des title-Attributes.

            Ja, ist ein Thema außerhalb des Scopes der Spec.

            Deswegen besteht auch keine Hoffnung, dass die IE-Entwickler diesen vermeintlichen Bug jemals fixen werden.

            Da ist MS ja schon aufgrund seiner sehr langen Aktualisierungszyklen eh hinten dran ...!

            Besten Dank für deine Bemühungen.

            Gruß Gunther

  2. Om nah hoo pez nyeetz, Gunther!

    Gibt es einen vernünftigen "Workaround"?

    Ja. Den Tooltip nicht als Geschwist, sondern als Kind des Auslösers erstellen.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Reif und Reifrock.

    1. Om nah hoo pez nyeetz, Matthias!

      Gibt es einen vernünftigen "Workaround"?

      Ja. Den Tooltip nicht als Geschwist, sondern als Kind des Auslösers erstellen.

      Wie meinst du das?
      Der "gehört" doch zu dem jeweiligen 'A' Element

        
      <a href="#" title="Erscheint im Browser als Tool-Tipp">...</a>  
      
      

      Gruß Gunther

      1. Om nah hoo pez nyeetz, Gunther!

        Wie meinst du das?
        Der "gehört" doch zu dem jeweiligen 'A' Element

        <a href="#" title="Erscheint im Browser als Tool-Tipp">...</a>

          
        Solange du in dem Tooltip keinen weiteren Link unterbringen möchtest, ist das doch nicht schlimm? Und es impliziert genau das geforderte Verhalten: wenn man mit der Maus über dem Tooltip ist, geht der Link nicht zu.  
          
        Matthias
        
        -- 
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Rad und Radar](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=R#rad).  
        ![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  
        
        
        1. Om nah hoo pez nyeetz, Matthias!

          Solange du in dem Tooltip keinen weiteren Link unterbringen möchtest, ist das doch nicht schlimm? Und es impliziert genau das geforderte Verhalten: wenn man mit der Maus über dem Tooltip ist, geht der Link nicht zu.

          Doch, im IE wird der "Hover" beenedet, sobald du mit dem Cursor über den Tool-Tipp kommst.
          Schau' es dir bitte im zweiten Fiddle nochmal an (über den unteren Tool-Tipp fahren).

          Und das ist bei einem klassischen Drop-Down Menü genau der Fall, da die Links ja Kindelemente des LI Elements sind, auf welches das Hovern angewendet wird.

          Gruß Gunther

          1. Om nah hoo pez nyeetz, Gunther!

            Doch, im IE wird der "Hover" beenedet, sobald du mit dem Cursor über den Tool-Tipp kommst.
            Schau' es dir bitte im zweiten Fiddle nochmal an (über den unteren Tool-Tipp fahren).

            So. Jetzt habe ich auch einen IE10 zum fiddle-gucken. Und ich muss sagen, ich kann deine obige Aussage nicht bestätigen.

            echter IE 10 (10.0.9200.16660) unter Win7 Home Premium SP1 64bit

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Schwan und Schwangerschaft.

            1. Om nah hoo pez nyeetz, Matthias!

              So. Jetzt habe ich auch einen IE10 zum fiddle-gucken. Und ich muss sagen, ich kann deine obige Aussage nicht bestätigen.

              echter IE 10 (10.0.9200.16660) unter Win7 Home Premium SP1 64bit

              Hmmm ..., mal abgesehen davon, dass dank Gunnars Hinweis die Sache eh nicht tragisch ist (weil besser ohne Title-Attribut), ist das aber sehr seltsam.

              Dann steht es jetzt quasi 2:2.
              Bei Mathias & Matthias tritt das Problem nicht auf, und bei 1UnitedPower & Gunther tritt es auf.

              Gibt es nicht bei dem 64 Bit Windows auch einen zweiten (32 Bit) IE?
              Hast du den mal ausprobiert?

              Gruß Gunther

              1. Om nah hoo pez nyeetz, Gunther!

                Hmmm ..., mal abgesehen davon, dass dank Gunnars Hinweis die Sache eh nicht tragisch ist (weil besser ohne Title-Attribut), ist das aber sehr seltsam.

                Das sehe ich anders. Ich bin mir nicht sicher, ob der Weg, dass title-Attribut für alle wegzulassen, der richtige ist. Erste Smarthphones reagieren bereits auf :hover, es ist imho nur eine Frage der Zeit, bis auch das title-Attribut wieder angezeigt wird.

                Gibt es nicht bei dem 64 Bit Windows auch einen zweiten (32 Bit) IE?

                Weiß ich nicht.

                Hast du den mal ausprobiert?

                Nein.

                Matthias

                --
                Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Sau und Sauron.

                1. Om nah hoo pez nyeetz, Matthias!

                  Hmmm ..., mal abgesehen davon, dass dank Gunnars Hinweis die Sache eh nicht tragisch ist (weil besser ohne Title-Attribut), ist das aber sehr seltsam.

                  Das sehe ich anders. Ich bin mir nicht sicher, ob der Weg, dass title-Attribut für alle wegzulassen, der richtige ist. Erste Smarthphones reagieren bereits auf :hover, es ist imho nur eine Frage der Zeit, bis auch das title-Attribut wieder angezeigt wird.

                  Das mag durchaus sein. Wie meinst du das "Erste Smarthphones reagieren bereits auf :hover"?
                  So wie bei Android, dass :hover bei einem Touch angewendet wird?

                  Letztlich bleibt bei nicht vorhandenem Cursor immer das Grundproblem, wie man "hover/ clickable/ touchable" Elemente so darstellt, dass sie für den User auch als solche erkennbar sind?

                  Ich finde, das ist aktuell unter dem Usability Gesichtspunkt noch eine "spannende" Frage.
                  Aber eben eine ganz andere, als die des Threads hier. ;-)

                  Gruß Gunther

                  1. Meine Herren,

                    Das sehe ich anders. Ich bin mir nicht sicher, ob der Weg, dass title-Attribut für alle wegzulassen, der richtige ist. Erste Smarthphones reagieren bereits auf :hover, es ist imho nur eine Frage der Zeit, bis auch das title-Attribut wieder angezeigt wird.

                    Eben solange im title-Attribut keine relevanten Informationen, sondern nur Luxus steht, sehe ich das genauso.

                    Das mag durchaus sein. Wie meinst du das "Erste Smarthphones reagieren bereits auf :hover"?
                    So wie bei Android, dass :hover bei einem Touch angewendet wird?

                    Auf meinem Smartphone gibt's Floating-Touch, da reicht es mit dem Finger über dem Bildschirm zu schweben. Das triggert im Web leider nicht die hover-Ereignisse, sondern kann lediglich Links beim hovern hervorheben - verschwendetes Potenzial.

                    1. Mein Herr!

                      Auf meinem Smartphone gibt's Floating-Touch, da reicht es mit dem Finger über dem Bildschirm zu schweben. Das triggert im Web leider nicht die hover-Ereignisse, sondern kann lediglich Links beim hovern hervorheben - verschwendetes Potenzial.

                      Du hast nicht zufällig ein S4 und meinst "Air View"?
                      Oder handelt es sich um ein Sony Xperia?

                      Und ob eine Webseite nachher wirklich "benutzerfreundlicher" ist, wenn es an allen Ecken und Enden irgendwelche zusätzlichen Einblendungen, Hervorhebungen oder was weiß ich gibt, sei auch nochmal dahingestellt.

                      Ich würde mir so etwas in der Art wünschen, dass (über die Auslöser kann man separat diskutieren) die entsprechenden Elemente quasi umrahmt werden und ein entsprechendes Symbol für "Touch" bspw. in der rechten unteren Ecke eingeblendet würde.

                      Gruß Gunther

                      1. Hallo,

                        Und ob eine Webseite nachher wirklich "benutzerfreundlicher" ist, wenn es an allen Ecken und Enden irgendwelche zusätzlichen Einblendungen, Hervorhebungen oder was weiß ich gibt, sei auch nochmal dahingestellt.

                        richtig, und das gilt auch unabhängig davon, ob Smartphone oder Desktop-PC. Ich ärgere mich des öfteren über Webseiten (seltener auch Programme), bei denen man den Mauszeiger kaum irgendwo stehenlassen kann, ohne dass irgendein Tooltip aufpoppt. Weniger ist da oft mehr.

                        Ciao,
                         Martin

                        --
                        Keine Sorge, wir finden für jede Lösung ein Problem.
                        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                      2. Meine Herren,

                        Du hast nicht zufällig ein S4 und meinst "Air View"?
                        Oder handelt es sich um ein Sony Xperia?

                        Xperia Sola, aber begeistert hat mich dieses Floating Touch wirklich nicht, einzig und allein der Handschuhmodus ist cool daran.

                        1. Hallo 1UnitedPower,

                          ... einzig und allein der Handschuhmodus ist cool daran.

                          ich hoffe, die Finger bleiben trotzdem warm :)

                          Gruß, Jürgen

                  2. Om nah hoo pez nyeetz, Gunther!

                    Das mag durchaus sein. Wie meinst du das "Erste Smarthphones reagieren bereits auf :hover"?

                    Beispielsweise das Samsung galaxy note mit Stiftbedienung.

                    Matthias

                    --
                    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Mond und Mondrian.

                    1. Om nah hoo pez nyeetz, Matthias!

                      Das mag durchaus sein. Wie meinst du das "Erste Smarthphones reagieren bereits auf :hover"?

                      Beispielsweise das Samsung galaxy note mit Stiftbedienung.

                      Stimmt - hab' selbst eines ... ;-)

                      Aber die Stift-Bedienung ist eher so ein "Zwitterding" zwischen Maus + Cursor und Touch.
                      Und das nächste Problem ist, dass man AFAIK auch nicht "feststellen" kann, ob ein Stift verwendet wird, oder nicht.

                      Heißt wenn man Hover für diese Art Geräte "vermeidet/ deaktiviert", nutzt der Stift auch nichts ...!

                      Hier wäre es imho höchst hilfreich, wenn man analog zu den Media Queries, mittels derer man nach Eigenschaften des Ausgabemediums unterscheiden kann, auch entsprechende Möglichkeiten bezüglich der "Bedienvariante" hätte.

                      Gruß Gunther

                      1. @@Gunther:

                        nuqneH

                        Hier wäre es imho höchst hilfreich, wenn man analog zu den Media Queries, mittels derer man nach Eigenschaften des Ausgabemediums unterscheiden kann, auch entsprechende Möglichkeiten bezüglich der "Bedienvariante" hätte.

                        Du meinst @media (pointer: fine)? [MQ4]

                        Qapla'

                        --
                        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                        1. @@Gunnar:

                          nuqneH

                          Hier wäre es imho höchst hilfreich, wenn man analog zu den Media Queries, mittels derer man nach Eigenschaften des Ausgabemediums unterscheiden kann, auch entsprechende Möglichkeiten bezüglich der "Bedienvariante" hätte.

                          Du meinst @media (pointer: fine)? [MQ4]

                          Ja genau. ;-)
                          Dauert halt noch ein Weilchen, bis man die auch verwenden kann.
                          Aktuell sieht es da noch sehr mau aus ...!

                          Aber ..., man/ ich muss zumindest mal feststellen, dass die Erkenntnis bezüglich der Anforderungen aus der Praxis inzwischen deutlich schneller erkannt werden, und auch versucht wird, entsprechend darauf zu reagieren. Das lässt ja hoffen ...! :-)

                          Allerdings bin ich mit dem aktuellen Ansatz "nur bedingt glücklich" ...!

                          "If a device has multiple input mechanisms, it is recommended that the UA reports the characteristics of the least capable pointing device of the primary input mechanisms."

                          Das ist doch schon wieder "Käse". Andersherum würde es imho mehr Sinn machen.

                          Und warum um alles in der Welt muss man so nichtssagende Begriffe wie ‘coarse’ und ‘fine’ verwenden? Was spricht dagegen, das Kind beim Namen zu nennen, also 'mouse', 'stylus' etc.?
                          Das würde für die Zukunft eine ggf. sinnvolle Differenzierung zulassen - der aktuelle Entwurf nicht, da es nur zwei Gruppen gibt.

                          Die Krönung ist aber wieder der letzte Satz:
                          "For accessibility reasons, even on devices whose pointing device can be described as ‘fine’, the UA may give a value of ‘coarse’ or ‘none’ to this media query, to indicate that the user has difficulties manipulating the input device accurately or at all."

                          Was soll das heißen? Dass man die ganze Geschichte doch vergessen kann ...!?

                          Gruß Gunther

                          1. Meine Herren,

                            Du meinst @media (pointer: fine)? [MQ4]

                            Hui, kannte ich noch nicht. Danke Gunnar.

                            Allerdings bin ich mit dem aktuellen Ansatz "nur bedingt glücklich" ...!

                            Ich auch, aber das Working-Draft ist ja auch noch brandneu: 30.08.2013 ist scheinbar die erste Version

                            "If a device has multiple input mechanisms, it is recommended that the UA reports the characteristics of the least capable pointing device of the primary input mechanisms."

                            Das ist doch schon wieder "Käse". Andersherum würde es imho mehr Sinn machen.

                            Imho. nicht: Wenn ich ein einen Touchscreen und eine Maus zu Verfügung habe, hätte ich gerne, dass ich die Seite auch komplett mit dem Touchscreen bedienen kann und nicht gezwungen werde meine Maus zu benutzen. Ein Design, das mit einem Touchgerät funktioniert, funktioniert i.d.R. auch mit einer Maus, der umgekehrte Weg ist schwieriger zu gehen.

                            Und warum um alles in der Welt muss man so nichtssagende Begriffe wie ‘coarse’ und ‘fine’ verwenden? Was spricht dagegen, das Kind beim Namen zu nennen, also 'mouse', 'stylus' etc.?

                            Da stimm ich dir vollkommen zu. Und die Begriffe "tactile" und "visual" werden auch nirgends definiert. Ein Stylus kann auf einem Touchscreen angewandt "tactile" sein und auf einem Trackpad "visual".

                            "For accessibility reasons, even on devices whose pointing device can be described as ‘fine’, the UA may give a value of ‘coarse’ or ‘none’ to this media query, to indicate that the user has difficulties manipulating the input device accurately or at all."

                            Was soll das heißen? Dass man die ganze Geschichte doch vergessen kann ...!?

                            Ich vermute, dass ist ein Wink an die Browserhersteller, dass sie es ihren Benutzern erlauben sollen eine korrespondierende Eigenschaft zu kontrollieren.

                            1. Mein Herr!

                              "If a device has multiple input mechanisms, it is recommended that the UA reports the characteristics of the least capable pointing device of the primary input mechanisms."

                              Das ist doch schon wieder "Käse". Andersherum würde es imho mehr Sinn machen.

                              Imho. nicht: Wenn ich ein einen Touchscreen und eine Maus zu Verfügung habe, hätte ich gerne, dass ich die Seite auch komplett mit dem Touchscreen bedienen kann und nicht gezwungen werde meine Maus zu benutzen. Ein Design, das mit einem Touchgerät funktioniert, funktioniert i.d.R. auch mit einer Maus, der umgekehrte Weg ist schwieriger zu gehen.

                              Ich vermute, dass ist ein Wink an die Browserhersteller, dass sie es ihren Benutzern erlauben sollen eine korrespondierende Eigenschaft zu kontrollieren.

                              Wenn es mehrere "pointing devices" gibt, bedarf es imho einer Einstell-/ Konfigurationsmöglichkeit im Browser, welche(s|r) als Primärer verwendet werden soll, damit die Werte für die MQs auch sinnvoll für das Layout genutzt werden können.

                              Die Variante einfach "pauschal" immer die "geringwertigste" Methode anzunehmen, halte ich persönlich jedenfalls für nicht ideal.

                              Gruß Gunther

    2. @@Matthias Apsel:

      nuqneH

      Ja. Den Tooltip nicht als Geschwist, sondern als Kind des Auslösers erstellen.

      Sie meinten: Geschwulst?

      Ist heute Wortneuschöpfungstag?

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  3. Hallo,

    Im IE (10) bleibt der Tool-Tipp nach seinem Erscheinen auch so lange stehen, dass man mit dem Cursor darüber fahren kann. Wenn man das tut, oder das passiert, klappt das Menü zu. Das heißt also, der Tool-Tipp "überlagert" das eigentliche Objekt und somit erkennt der Browser nicht mehr den Hover-Status.

    Kann ich weder nachvollziehen unter Metro-IE10 noch unter Desktop-IE10 unter Windows 8 in einer VMWare-Fusion-VM. Die VM ist von modern.ie.

    Mathias

    1. Hallo Mathias!

      Kann ich weder nachvollziehen unter Metro-IE10 noch unter Desktop-IE10 unter Windows 8 in einer VMWare-Fusion-VM. Die VM ist von modern.ie.

      Danke für die Info.
      Vielleicht liegt es an dem Unterschied Win 7 vs. 8!?

      Ich habe es auf einem "richtigen" IE 10 unter Windows 7 (32 Bit) getestet.
      Und 1UnitedPower konnte es ja auch nachvollziehen, weshalb ich es mal für äußerst unwahrscheinlich halte, dass es etwas mit meinem individuellen System zu tun hat.

      Sind diese Tool-Tipps nicht auch "irgendwie" mit dem BS "verknüpft" (also keine reine Browser-Angelegenheit)?

      Gruß Gunther

      1. Meine Herren,

        Ich habe es auf einem "richtigen" IE 10 unter Windows 7 (32 Bit) getestet.
        Und 1UnitedPower konnte es ja auch nachvollziehen, weshalb ich es mal für äußerst unwahrscheinlich halte, dass es etwas mit meinem individuellen System zu tun hat.

        Ich habe ebenfalls unter Windows 7 getestet

        --
        Hey Girl,
        i wish you were asynchronous, so you'd give me a callback.
  4. @@Gunther:

    nuqneH

    Ganz brav habe ich meine Links im HTML-Code auch jeweils mit einem entsprechenden Title-Attribut ausgestattet, welches also nun beim Überfahren der Links mit dem Cursor als Tool-Tipp angezeigt wird.

    Brav??

    „Wenn du Inhalt vor Nutzern von Smartphones und Tablets sowie vor Nutzern technischer Hilfen [Screenreadern] und von Tastatur-Bedienung verstecken willst, dann verwende das title-Attribut.“ (Steve Faulkner)

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. @@Gunnar:

      nuqneH

      „Wenn du Inhalt vor Nutzern von Smartphones und Tablets sowie vor Nutzern technischer Hilfen [Screenreadern] und von Tastatur-Bedienung verstecken willst, dann verwende das title-Attribut.“ (Steve Faulkner)

      Good to know ..., manchmal sollte man die Updates auch installieren.
      Mir ging es in etwa so http://blog.silktide.com/2013/01/i-thought-title-text-improved-accessibility-i-was-wrong/

      Thanks for the update! :-)

      Gruß Gunther

      1. @@Gunther:

        nuqneH

        Thanks for the update! :-)

        Follow @stevefaulkner.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. @@Gunnar:

          nuqneH

          Thanks for the update! :-)

          Follow @stevefaulkner.

          Das tue ich schon seit längerem ..., aber ich komme nicht immer dazu auch wirklich alles zu lesen. :-(

          Gerade so alt eingebürgerte Dinge (oder schlechte Angewohnheiten) fallen da gerne schon mal durchs Raster ...! Wobei man ja eigentlich gerade die immer mal wieder "überprüfen" sollte.

          Gruß Gunther