Ich habe eine Übersetzungsfunktion für einen Tooltip in einem Formular erstellt. Die Funktion basiert auf JavaScript und nutzt ein Übersetzungsobjekt (translations), um Inhalte dynamisch zu ändern, wenn die Sprache gewechselt wird.
Das Problem: Der Tooltip-Inhalt wird nicht korrekt aktualisiert, obwohl andere Elemente wie Labels und Buttons erfolgreich übersetzt werden.
Hier ist der relevante Code:
Das Problem: Der Tooltip-Inhalt wird nicht korrekt aktualisiert, obwohl andere Elemente wie Labels und Buttons erfolgreich übersetzt werden.
Hier ist der relevante Code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip Übersetzung</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Tooltip-Container -->
<div id="tooltip-container" class="tooltip-container">
<button id="tooltip-button" aria-describedby="tooltip-content">
Tooltip anzeigen
</button>
<div id="tooltip-content" class="tooltip" role="tooltip">
<p id="tooltip-description">Standardtext für den Tooltip</p>
<ul>
<li id="language-selection-info">Sprache auswählen</li>
<li id="sku-info">SKU eingeben</li>
<li id="description-info">Beschreibung eingeben</li>
<li id="color-size-info">Farbe und Größe eingeben</li>
</ul>
</div>
</div>
<!-- Sprachwechsel-Buttons -->
<div id="language-switch">
<button class="language-button" data-lang="DE">Deutsch</button>
<button class="language-button" data-lang="EN">Englisch</button>
</div>
<script src="script.js"></script>
</body>
</html>
Javascript:
const translations = {
DE: {
tooltip: {
intro: "Dies ist der Tooltip auf Deutsch.",
fields: {
language: "Sprache auswählen.",
sku: "Geben Sie die SKU ein.",
description: "Beschreibung eingeben.",
colorSize: "Farbe und Größe angeben.",
},
},
},
EN: {
tooltip: {
intro: "This is the tooltip in English.",
fields: {
language: "Select the language.",
sku: "Enter the SKU.",
description: "Enter the description.",
colorSize: "Specify the color and size.",
},
},
},
};
function updateTooltip(languageCode) {
const langData = translations[languageCode]?.tooltip;
if (!langData) return;
// Aktualisiere Tooltip-Inhalte
document.getElementById("tooltip-description").innerText = langData.intro;
document.getElementById("language-selection-info").innerText = langData.fields.language;
document.getElementById("sku-info").innerText = langData.fields.sku;
document.getElementById("description-info").innerText = langData.fields.description;
document.getElementById("color-size-info").innerText = langData.fields.colorSize;
}
// Event-Listener für Sprachwechsel
document.querySelectorAll(".language-button").forEach((button) => {
button.addEventListener("click", () => {
const lang = button.getAttribute("data-lang");
updateTooltip(lang);
});
});