• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[JQUERY] Zeige dynamischen Text OnMouseOver, abhängig vom jeweiligen Element

EvilQueen

New member
Hallo liebe Community,

vorab sei einmal gesagt, dass ich in puncto js absoluter Anfänger bin. Ich bekomme gerade so die einfachsten Sachen hin. Nun stehe ich vor einer - für mich - größeren Herausforderung, bei der ich etwas Hilfe bräuchte.

Nun zum Problem:
Ich arbeite an einer Webseite, welche auf mehreren php-Seiten unterschiedliche Formulare anbietet, in die Nutzer etwas eintragen können. Die Seiten sind praktisch immer gleich aufgebaut: Links gibt es eine Sidebar, die bei Bedarf Tooltips zu den einzelnen Inputs der Formulare ausgibt, rechts ist das Formular. Da ich css-Tooltips nicht so mag und die Sidebar im Zweifel dann leer wäre (was mein Design zerhaut), versuche ich nun das ganze über js zu lösen.

Das sollte dann so funktionieren, dass ich über ein Input mit der Maus fahre (bsp.: Input für Username) und links erscheint dann der Tooltip, wie gesagt. Beim mouseout verschwindet der wieder. Folgendes habe ich schon zustande gebracht:

In der Sidebar ein leeres p-Element (enthält später den Tooltip):

HTML:
<p id="tooltip"></p>

Im Formular die Inputs, wie dieses:

HTML:
<input type="text" name="username" id="username" onmouseover="tooltipShow()" onmouseout="tooltipHide()">

In der js-Datei diese beiden Funktionen:

Code:
function tooltipShow() {
	var tooltip = document.getElementById('tooltip');
	tooltip.innerHTML = "TEST";
}

function tooltipHide() {
	var tooltip = document.getElementById('tooltip');
	tooltip.innerHTML = "";
}

Das funktioniert auch problemlos. Jetzt gehts aber los: Nun ist es keine kleine Webseite mit drei Formularen zu je 2 Tooltips, sodass man zur Not 6 verschiedene tooltipShow()-functions machen könnte, jeweils mit unterschiedlichem Text. Die komplette Webseite wird zur Laufzeit geschätzte 50 und mehr Inputs bekommen, für die fast immer auch ein Tooltip angezeigt werden soll. Die Funktion tooltipHide() ist ja überall gleich, die erste müsste jetzt aber dynamischer sein, sprich abhängig vom jeweils mit der Maus überfahrenen Input soll ein anderer Text ins p-Element der Sidebar.

Jetzt wäre die Frage, wie löse ich das? Über if-Anweisungen habe ich schon nachgedacht, aber wie gesagt, das sind dann bei 50 und mehr Tooltips auch unglaubliche Bäume von if-Abfragen und alles andere als elegant gelöst. Sicher ist die Lösung ganz einfach, aber wie gesagt - ich bin blutiger Anfänger und habe keine Ahnung, in welche Richtung ich da schauen muss. Mein einziger Vorteil ist, dass sich js und php von der Syntax her sehr ähneln, weshalb ich mich in die Anwendung bestimmter Funktionen etc. recht schnell einfinde, aus dem FF kann ich die aber natürlich (noch) nicht.

Wenn ihr mir da ein wenig auf die Sprünge helfen könntet, wäre ich sehr dankbar.

LG
EvilQueen
 
Guten Morgen,

eine kleine Erweiterung an Deinem "onmouseover" dürfte Dir das bringen, was Du eigentlich vor hast:

Code:
<input type="text" name="username" id="username" onmouseover="tooltipShow('zeig her!')" onmouseout="tooltipShow('')">

Wie Du siehst nehme ich nur noch eine Funktion - "tooltopShow" reicht da völlig. Die sieht jetzt aber so aus ...

Code:
function tooltipShow(str) {
    var tooltip = document.getElementById('tooltip');
    tooltip.innerHTML = str;
}

Um dem ganzen noch etwas mehr Performance zu geben, würde ich nicht ständig und immer wieder aufs Neue ins DOM, um 'tooltip' (id) abzuholen. Zwar rate ich Dir direkt davon ab, aber so dürfte es schneller gehen:

Code:
var tooltip = document.getElementById('tooltip');
function tooltipShow(str) {
    tooltip.innerHTML = str;
}

Schöööön wird es so ...

Code:
var meineAppMitTollenTooltipps = {
    tooltip: null, // anfangs nix

    tooltipChange: function(str){
        // str: was er zeigen soll im p-Tag
        this.tooltip.innerHTML = str;
    },

    init: function(domID){
        // domID: p-Tag für Ausgabe
        this.tooltip = document.getElementById(domID);
    }
}

meineAppMitTollenTooltipps.init('tooltip');

Das Input-Event "onmouseover" würde mit damit so aussehen:
Code:
<input type="text" name="username" id="username" onmouseover="meineAppMitTollenTooltipps.toolTippChange('zeig her!')" onmouseout="meineAppMitTollenTooltipps.toolTippChange('')">

So stünde tooltip nicht als globale Variable im Raum, steht immer zur Verfügung ohne Neuansprache im DOM und Deine Strings kannst Du lustig jonglieren.

Eine Bitte: Nicht zerfleischen! Das ist jetzt flugs im Editor hier im Forum geschrieben ...

Viele Grüße
 
Eines hatte ich in meinem Wahn der Hilfestellung ganz vergessen, was ich noch nun nachhole: Willkommen hier in diesem Teil des Internets und viel Erfolg wie Spaß mit uns. ;)
 
Zurück
Oben