borisbaer: Probleme mit Tooltip-Plugin

problematische Seite

Hallo! Ich möchte eine interaktive Karte erstellen und habe ein kleines Problem. Das Plugin, das ich für die Hover-Tooltips benutze, macht irgendwie Zicken und mit jQuery kenne ich mich wahrlich nicht gut aus. Das ist das Plugin, das ich meine: http://www.menucool.com/tooltip/javascript-tooltip.

Ich versuche, diese Seite noch mal neu zu schreiben: http://eso.tamriel-hero.com/karten/dolchsturz/

Das ist bisher dabei rausgekommen: http://eso.tamriel-hero.de/_new/karten.php

Am PC-Browser funktioniert eigentlich alles gut, aber wenn ich das gelbe Quadrat als Button definiere, dann springt die Karte in der mobilen Ansicht sofort so weit nach links bis es beim Quadrat angelangt ist. Definiere ich das gelbe Quadrat jedoch als div, dann macht es das nicht. Dafür habe ich dann aber das Problem, dass es verschwindet, sobald ich draufklicke, was es eigentlich nicht soll. Dies tut es wiederum als Button nicht. Mir fällt mittlerweile nichts mehr. Weiß jemand Rat?

  1. problematische Seite

    Lieber borisbaer,

    ich kann Dir keinen konkreten Tipp für einen "quick fix" geben. Nur allgemeinere Fragen, die vielleicht am Ende sogar zu einer anderen Herangehensweise führen könnten.

    1. Was genau soll "interaktive Karte" leisten? Ausschließlich "Tooltips" anzeigen?
    2. Was soll auf Touch-Geräten passieren, die keinen Hover-Zustand kennen?
    3. Was soll auf einen Klick hin passieren? Wird man wie bei einem Link weitergeleitet?

    Vielleicht kann man aus Deinen Antworten etwas erkennen, das in der Frage "wie gehe ich es an?" neue Erkenntnisse bringt.

    Liebe Grüße,

    Felix Riesterer.

    1. problematische Seite

      Vielen Dank für die Hinweise!

      1. Ja, eigentlich soll sie wirklich nicht viel mehr leisten, als nur anzuzeigen, wo sich was befindet.

      2. Ehrlich gesagt wusste ich nicht mal, dass es solche gibt. 😀 Ich habe zusätzlich zum Hover-Event noch ein Click-Event hinzugefügt, welches dasselbe bewirken soll.

      3. Nein, es öffnet sich lediglich eine Tooltip-Box, in der sich ein Link befindet.

      Ich habe nun festgestellt, dass der <button>-tag die Seite nur dann springen lässt, wenn ich mich auf dem Smartphone in der vertikalen Ansicht befinde, in der horizontalen hingegen funktionert es ohne Springen. Leider verstehe ich überhaupt nicht, warum, aber die mobilen Browser machen oft Dinge, die ich nicht verstehe.

      Vielleicht könnte man dem <div>-Element ja role="button" zuweisen, damit es auch per Tastatur zugänglich wird. Ich bemühe mich nämlich schon, weitestgehend Barrierefreiheit zu bewahren.

      1. problematische Seite

        hallo

        Vielleicht könnte man dem <div>-Element ja role="button" zuweisen, damit es auch per Tastatur zugänglich wird. Ich bemühe mich nämlich schon, weitestgehend Barrierefreiheit zu bewahren.

        Lies das:

        https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role

        und du wirst direkt ein button Element verwenden wollen.

        --
        Neu im Forum! Signaturen kann man ausblenden!
        1. problematische Seite

          Danke, das habe ich schon gelesen. Ich wollte ja auch ein button-Element verwenden, aber leider kam ja mit diesem auch das »Springen« in der mobilen Ansicht. Du hast dennoch Recht. Ich muss einen anderen Weg finden, um das zu lösen. Ich behalte also den Button!

      2. problematische Seite

        Lieber borisbaer,

        inwiefern hilft Dir dieses Codepen-Beispiel hier (völlig ohne JavaScript) weiter?

        Liebe Grüße,

        Felix Riesterer.

        1. problematische Seite

          Lieber borisbaer,

          #map button:focus + p,
          #map button:hover + p,
          /* re-enable hyperlinks */
          #map p:active {
            display: block;
          }
          

          Ich habe einen CSS-Selektor ergänzt, damit die Links wieder funktionieren - im Codepen tun sie das leider trotzdem nicht, aber in einer lokal gespeicherten Datei tun sie es in FF und Chrome.

          Liebe Grüße,

          Felix Riesterer.

          1. problematische Seite

            Wow, vielen Dank für die Mühe. Auch ich habe mir schon überlegt, es als HTML-Tooltip umzusetzen, leider wird es damit doch sehr umständlich, wenn ich bedenke, dass hunderte von Markierungen auf einer solchen Karte sein können. Das Plugin ist eigentlich unumgänglich für mich und somit auch die jQuery-Lösung.

            Ich werde mir das Ganze trotzdem noch mal durch den Kopf gehen lassen!

            1. problematische Seite

              Lieber borisbaer,

              leider wird es damit doch sehr umständlich, wenn ich bedenke, dass hunderte von Markierungen auf einer solchen Karte sein können.

              wie erhalten diese Markierungen ihre Koordinaten?

              Das Plugin ist eigentlich unumgänglich für mich und somit auch die jQuery-Lösung.

              Da habe ich meine Zweifel. :-)

              Die Koordinaten müssen ja von irgendwo her kommen. Anstatt sie in ein JavaScript zu schreiben, kannst Du sie ja auch im CSS-Code eintragen. In meinem Beispiel ist das ja sichtbar.

              Natürlich kann man das CSS mit den Koordinaten auch von JavaScript "bauen" lassen. Es sollte halt beim Seitenbesucher eine solide Lösung nutzbar ankommen.

              Ich werde mir das Ganze trotzdem noch mal durch den Kopf gehen lassen!

              Immer her mit Deinen Ideen und Fragen! In solchen Fällen lerne ich ebenso dazu.

              Liebe Grüße,

              Felix Riesterer.

      3. problematische Seite

        @@borisbaer

        Vielleicht könnte man dem <div>-Element ja role="button" zuweisen, damit es auch per Tastatur zugänglich wird.

        Das reicht nicht. ☞ DIV soll kein Button sein TL;DR: button verwenden.

        Ich bemühe mich nämlich schon, weitestgehend Barrierefreiheit zu bewahren.

        👍

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann