Add hint text; closes #5

assets/scss/partials/sidebar.scss

@@ -18,7 +18,6 @@
 	border-radius: 0 2rem 2rem 0;
 	border: 1px solid var(--sidebar-border);
 	border-left: 0;
-	overflow: hidden;
 	@media (max-width: 1140px) {
 		overflow: unset;
 		border: 0;
@@ -28,6 +27,43 @@
 		margin: 0;
 		background-color: transparent;
 	}
+
+	a.hint-text {
+		&::before {
+			content: attr(data-title);
+			left: 100%;
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			background-color: var(--sidebar-accent-2);
+			color: var(--text-accent-900);
+			padding: 0.2rem 0.5rem;
+			border-radius: 0.5rem;
+			pointer-events: none;
+			opacity: 0%;
+			transition: opacity 0.3s ease-in-out;
+		}
+		&::after {
+			content: "";
+			transform: translate(-100%, -50%);
+			border-left: 0.5rem solid transparent;
+			border-top: 0.5rem solid transparent;
+			border-bottom: 0.5rem solid transparent;
+			border-right: 0.7rem solid var(--sidebar-accent-2);
+			top: 50%;
+			position: absolute;
+			left: 100%;
+			pointer-events: none;
+			opacity: 0%;
+			transition: opacity 0.3s ease-in-out;
+		}
+		&:hover {
+			&::before, &::after {
+				opacity: 100%;
+			}
+		}
+	}
+
 	header {
 		text-align: center;
 		user-select: none;
@@ -146,6 +182,7 @@
 				display: flex;
 				padding: 1rem;
 				place-content: center;
+				
 				&:hover {
 					.mastodon-icon {
 						color: hsl(251.5, 58.9%, 51.4%);
@@ -154,6 +191,7 @@
 				.mastodon-icon {
 					color: hsl(239.6, 100%, 69.4%);
 				}
+
 				.icon {
 					height: 1.25rem;
 					width: 1.25rem;

layouts/partials/sidebar.html

@@ -21,7 +21,7 @@
     </section>
     <aside>
         <section id="social-links">
-            <a rel="me" href="https://social.anoxinon.de/@vri">{{ partial "helpers/icons" "mastodon" }}</a>
+            <a class="hint-text" rel="me" href="https://social.anoxinon.de/@vri" data-title="Mastodon">{{ partial "helpers/icons" "mastodon" }}</a>
         </section>
         <section id="languages">
         {{- if .Site.IsMultiLingual }}
@@ -33,7 +33,7 @@
                 {{ range $siteLanguages }}
                     {{ if eq $translation.Lang .Lang }}
                         {{ if ne $pageLanguage .Lang }}
-                            <a id="language" href="{{ $translation.Permalink }}">{{ .Params.languageFlag }}</a>
+                            <a class="hint-text" id="language" href="{{ $translation.Permalink }}" data-title="{{ .LanguageName }}">{{ .Params.languageFlag }}</a>
                         {{ end }}
                     {{ end }}
                 {{ end }}