Draw translation text above map, so that it isn't obscured

index.html

@@ -71,9 +71,6 @@
             font-family: sans-serif;
             visibility: hidden;
          }
-         .language:hover ~ .languageText {
-            visibility: visible;
-         }
 
 			.district {
 				stroke: white;
@@ -220,6 +217,7 @@
 
 		<script type="text/javascript" src="index.js"></script>
 		<script type="text/javascript" src="updateTranslations.js"></script>
+		<script type="text/javascript" src="svgHoverListener.js"></script>
 
 
 	</body>

index.js

@@ -252,6 +252,11 @@ function drawMap(world) {
 	states.append("path")
 		.attr("d", path)
 		.attr("class", d => stateOrDistrictOrLanguage(d))
+		.attr("id", function(d) {
+				if (stateOrDistrictOrLanguage(d) === "language") {
+						return languages[d.properties.lang_name.toLowerCase()].code + "langMap";
+				}
+		})
 		.attr("fill", function(d) {
 		    if (stateOrDistrictOrLanguage(d) === "language") {
 		    	return languages[d.properties.lang_name.toLowerCase()].color;
@@ -272,7 +277,8 @@ function drawMap(world) {
 		.append("title") // Tooltip
 		.text(d => d.properties.district);
 
-	states.append("text")
+	const textItems = svg.selectAll("g.textItem").data(world.features).enter().append("g");
+	textItems.append("text")
       .attr("x", function(d) {
 				if (stateOrDistrictOrLanguage(d) == "language") {
 					rtv = projection(d3.geoCentroid(d))[0];
@@ -338,7 +344,7 @@ function drawMap(world) {
 		});
 
    // Romanization
-	states.append("text")
+	textItems.append("text")
       .attr("x", d => stateOrDistrictOrLanguage(d) == "language" ? 
 							document.getElementById(d.properties.lang_code + "Text").getAttribute("x") : 
 							projection(d3.geoCentroid(d))[0])
@@ -362,7 +368,7 @@ function drawMap(world) {
 		});
 
    // Language
-	states.append("text")
+	textItems.append("text")
       .attr("x", d => stateOrDistrictOrLanguage(d) == "language" ? 
 							document.getElementById(d.properties.lang_code + "Text").getAttribute("x") : 
 							projection(d3.geoCentroid(d))[0])
@@ -396,6 +402,12 @@ function drawMap(world) {
 	const coordinates = [77.69916967457782,23.389970772934166];
 	const [xCoord, yCoord] = projection(coordinates);
 
+	document.querySelectorAll(".language").
+				forEach(function(element) {
+						element.addEventListener("mouseover", toggleLanguageDisplay);
+						element.addEventListener("mouseout", toggleLanguageDisplay);
+				});
+
 //	svg.append("text")
 //    .attr("x", xCoord)
 //    .attr("y", yCoord)

svgHoverListener.js

@@ -0,0 +1,8 @@
+function toggleLanguageDisplay(event) {
+		if (event.type == "mouseover") {
+				document.getElementById(this.id.replace(/langMap$/, '') + "Language").style.visibility = "visible";
+		}
+		if (event.type == "mouseout") {
+				document.getElementById(this.id.replace(/langMap$/, '') + "Language").style.visibility = "hidden";
+		}
+}