borisbaer: DIV bei MouseOver anzeigen ...

problematische Seite

Guten Tag!

Also, ich versuche gerade eine Art Tooltip-Funktion in meine Seite einzubauen.

Ich habe es zumindest schon einmal hingekriegt, das DIV-Element neben den Mauszeiger zu platzieren, wie man hier sehen kann: http://eso.tamriel-hero.com/quests/hauptgeschichte/gesprengte-ketten/

Allerdings ist die Geschichte hier halt permanent. Gerne würde ich aber dieses DIV-Element nur anzeigen lassen, wenn man z.B. mit dem Mauszeiger über den Button „Torschlüssel“ unter Schritt 6 fährt. Wie kann ich das umsetzen?

Vielen Dank!

  1. problematische Seite

    Hallo,

    na komm... da gibt's doch nahezu unendlich Antworten drauf im Netz.

    http://www.bing.com/search?q=css+tooltip+anzeigen+hover

    z.B. http://www.menucool.com/tooltip/css-tooltip

    Gruss
    Henry

  2. problematische Seite

    Hallo,

    denk bitte an die vielen Surfer ohne Maus. Auf der von dir verlinkten Seite habe ich keinen Tooltip gesehen - und wegen der kleinen Schrift auch fast nichts gelesen.

    Gruß
    Jürgen

    1. problematische Seite

      Hallo,

      denk bitte an die vielen Surfer ohne Maus. Auf der von dir verlinkten Seite habe ich keinen Tooltip gesehen - und wegen der kleinen Schrift auch fast nichts gelesen.

      ja nicht ganz nebensächlich. Vielleicht solltest du(Boris) tatsächlich erst mal deine Seite mobiltauglich machen, bevor du an die Feinheiten/Spielereien gehst. Habs gerade auch mal probiert und ich sehe noch weniger auf dem Handy als Jürgen. Hilfreich dabei vielleicht sowas.

      In diesem Zusammenhang, suche immer noch eine Antwort auf meine Frage, auch wenn keiner eine Lösung hat aber vielleicht einen Denkanstoß?

      Gruss
      Henry

      1. problematische Seite

        Ja, ich werde mir das mit der mobilen Darstellung auf jeden Fall nochmal anschauen.

        Ich habe Vieles zu dem Thema im Netz gefunden, aber leider gar nicht das, was ich brauche.

        Ein Plugin will ich nicht benutzen, JQuery bzw. JavaScript sollte genügen.

        Ich habe mich für eine zweifache Lösung entschieden, der „Tootip“ wird dann sowohl bei einem Klick als auch beim MouseOver aufgerufen, denn ohne Maus wird das hovern nicht möglich sein, das stimmt. Folgendermaßen habe ich es mir überlegt:

        1. Es gibt ein Element, entweder button oder span, das bei einem Klick (oder MouseOver) ein Div-Element erscheinen lässt, das im Code irgendwo platziert sein kann. Wie kann ich aber einstellen, dass dieses Div-Element relativ zum Span-Element, sagen wir einmal 30px rechts davon, erscheint?

        2. Die Click und MouseOver Function und ist ja einfach anzuwenden, nun würde ich aber gerne oben genanntes Div-Element wieder ausblenden lassen, sobald man irgendwo anders hinklickt oder einfach bei einem MouseOut-Event.

        Meine Frage ist eben, wie ich das Ganze mit JQuery bzw. JavaScript umsetzen könnte? Im Netz habe ich leider nichts gefunden.

        1. problematische Seite

          @@borisbaer

          1. Es gibt ein Element, entweder button oder span, das bei einem Klick […]

          Nein, einen Button, kein Span. Ein Span kann man gar nicht clicken – nicht alle Nuzter, nicht per Tastatur. Es wäre sinnlos, ein Span aufzurüsten, dass man das könnte. Verwende einen Button.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        2. problematische Seite

          @@borisbaer

          So ein Tooltip sollte so umgesetzt werden wie Progressive collapsibles in Heydon Pickerings Practical ARIA examples.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. problematische Seite

            Hej Gunnar,

            @@borisbaer

            So ein Tooltip sollte so umgesetzt werden wie Progressive collapsibles in Heydon Pickerings Practical ARIA examples.

            Das dient bei heydon als Beispiel für aria - halte ich aber für unangebracht. Für dieses Beispiel finde ich details und summary besser geeignet. Dann braucht es auch kein aria.

            Tooltipps von Heydon Pickering gibt es auf derselben Seite weiter oben