Addon: Tooltips

[fenglisch]

Auf Nutzer:innen-Feedback hin habe ich dieses kleine Addon erstellt, um zur Nutzung des "Doppelt gewichten"-Button anzuregen. Teilweise ist den Nutzer:innen nicht klar, was der bringt und dass sie den anklicken müssen, bevor sie ihre eigentliche Antwort auswählen.

[msteudtn]

Der Firefox in meiner Linux-Test-VM erzeugt keinen Tooltip. Der Chromium-Browser fügt aber alles ins DOM ein und zeigt es an.

Ich vermute, dass das Problem um die Zeile 60 bei votingDoubleTooltip.append(votingDoubleTooltipText, closeTooltip) liegt. Vielleicht hat Firefox ein Problem mit append() aber es könnte auch etwas anderes sein.

... oder ich habe ein paar seltsame Einstellungen bei mir und bei dir funktioniert alles. :)

Ich habe keine Tests auf mobilen Geräten gemacht.

Abgesehen davon: Gute Idee und Umsetzung! 👍 :)

[msteudtn]

Nachtrag: Solange #82 noch nicht umgesetzt ist, wäre ein Tooltip auf einen der beiden unteren Buttons am Ende auch noch eine nützliche Ergänzung.

... Das muss nicht gleich in der ersten Version drin sein, sondern reicht sicherlich auch später. :)

[fenglisch]

An das ganze Thema Browser-Support muss ich mich noch gewöhnen 🙈
Danke für das Feedback!
Ich habe node.append einfach durch zweimal node.appendChild ersetzt (e95ddf4) :-)

[msteudtn]

Korrektur: Es lag nicht am appendChild() sondern daran, dass in der /system/output.js (Zeile 30) der Inhalt von #votingDouble überschrieben wurde nachdem das Addon seinen Inhalt eingefügt hat. Chromium hat wohl die Daten in anderer Reihenfolge geladen.

Um das zu lösen, habe ich nach dem Eventlistener (load) noch einen Eventlistener (click) auf den "Los geht's"-Startbutton gelegt. Das ist keine optimale Lösung aber es erfüllt seinen Zweck.

window.addEventListener("load", () => {
	
  const elButtonStart = document.getElementById("descriptionButtonStart");
  elButtonStart.addEventListener("click", () => {
		
    // Erzeuge den Tooltip und seine Inhalte
   [...]
    // Stylesheet ins DOM einfügen
    document.head.appendChild(styleSheet)
    })
})

[fenglisch]

Korrektur: Es lag nicht am appendChild() sondern daran, dass in der /system/output.js (Zeile 30) der Inhalt von #votingDouble überschrieben wurde nachdem das Addon seinen Inhalt eingefügt hat. Chromium hat wohl die Daten in anderer Reihenfolge geladen.

Um das zu lösen, habe ich nach dem Eventlistener (load) noch einen Eventlistener (click) auf den "Los geht's"-Startbutton gelegt. Das ist keine optimale Lösung aber es erfüllt seinen Zweck.

Ah verstehe. Ja, das klingt doch nach einem sinnvollen Workaround, habe ich gleich so übernommen.

[fenglisch]

Ich hab jetzt zwei weitere Tooltips hinzugefügt. @msteudtn kannst du testen, ob das bei dir klappt?

[msteudtn]

Der Tooltip bei "Doppelt gewichten" wird bei mir angezeigt 👍 - aber ohne eine Hintergrundfarbe. Das verwirrt ein wenig, wenn in der mobilen Ansicht die Abstimmen-Buttons durchschimmern. :(

Die anderen Buttons werden nicht angezeigt. Laut Browser-Konsole kann die ID .querySelector("#resultsShortTable") in Zeile 149 nicht gefunden werden. Ich glaube, dass diese Tabelle nicht standardmäßig in der INDEX.HTML drin ist, sondern erst später zusammen mit den Ergebnissen aufgebaut wird.

In den anderen Addons habe ich deshalb den MutationObserver() auf eine inhaltliche Änderung von #resultsHeading gelegt. z.B. in https://github.com/msteudtn/Mat-O-Wahl/blob/master/extras/addon_show_first_results.js

	resultsHeadingContent = $("#resultsHeading").text()
	if (!resultsHeadingContent) {
		// nix. Noch keine Ergebnisse im DIV
	}
	else {
		// der eigentliche Code oder eine neue Funktion
		}
	} // end: else

[fenglisch]

Der Tooltip bei "Doppelt gewichten" wird bei mir angezeigt 👍 - aber ohne eine Hintergrundfarbe. Das verwirrt ein wenig, wenn in der mobilen Ansicht die Abstimmen-Buttons durchschimmern. :(

Ja, dafür muss oben die Variable const TOOLTIP_BACKGROUND_COLOR definiert sein. Bei uns habe ich das auf var(--secondary-color) eingestellt, aber die Variable gibt es ja in Bootstrap nicht (weshalb ich sie so genannt habe). Habe das jetzt zu var(--info) geändert, aber ist ja eh nur ein default. Wenn wir in den Stylesheets eigene Variablen einführen, können wir davon eine nehmen.

Die anderen Buttons werden nicht angezeigt. Laut Browser-Konsole kann die ID .querySelector("#resultsShortTable") in Zeile 149 nicht gefunden werden. Ich glaube, dass diese Tabelle nicht standardmäßig in der INDEX.HTML drin ist, sondern erst später zusammen mit den Ergebnissen aufgebaut wird.

Der MutationObserver bezieht sich ja auf document.querySelector("#resultsHeading"), das schon von Anfang an im DOM ist.

Der TOOLTIP_RESULTS_SHORT setzt aber voraus, dass die resultsByPartyAnswers innerhalb der resultsShortTable angezeigt wird, was erst durch meine Änderungen an der output.js der Fall ist (s. #82 (comment)). Das hatte ich vergessen. Theoretisch könnte ich das Addon nochmal umbauen, aber ich fände es ohnehin besser, wenn wir die Migration der resultsByPartyAnswers durchziehen.

Der TOOLTIP_RESULTS_BY_THESIS kann auch nicht funktionieren, sehe ich gerade. Er sucht nach #resultsByThesisQuestion${i}, aber das ist eine ID, die ich offenbar vor einiger Zeit mal zu Hilfszwecken selbst eingebaut habe, zur <div class="col col-10" role="cell"> 🙈

Also vermutlich ergibt das Addon erst nach einem Update der output.js Sinn