Probleme mit Tooltip-Plugin

[borisbaer]

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?

[Felix Riesterer]

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.

[borisbaer]

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.

[beatovich]

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.

[borisbaer]

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!

[Felix Riesterer]

Lieber borisbaer,

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

Liebe Grüße,

Felix Riesterer.

[Felix Riesterer]

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.

[borisbaer]

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!

[Felix Riesterer]

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.

[Gunnar Bittersmann]

@@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 🖖