Display a custom ABBR title which also works on mobiles (#265)

On mobiles, there's no way to display the `ABBR` `title` attribute. So let's create one way.

Heavily inspired by this https://bitsofco.de/making-abbr-work-for-touchscreen-keyboard-mouse/ and a bit by this https://stackoverflow.com/a/69353021/10537872

The relevant changes are that the title is read from the `data-title` attribute, which is created on mouseover from the regular `title` attribute which is then removed and added back on mouseout. Trying to keep the original attribute there for screen readers etc.

On mouseout, the `blur()` method is also called which "cancels" the focus state, in which the element is when it was clicked on. Without this, if you clicked the ABBR tag on desktop, the title would be visible until you've clicked again somewhere.

JS is also used to add `tabindex=0` because the attribute tag is created by Texy and it would require some more work to add it to HTML. The attribute makes the element reachable by using a keyboard.

site/public/www.michalspacek.cz/i/css/screen.css

@@ -72,7 +72,25 @@ blockquote {
 q::before { content: "«"; }
 q::after { content: "»"; }
 img { border: none; }
-abbr.dtstart, abbr.dtend { text-decoration: none; }
+abbr.dtstart, abbr.dtend { text-decoration: none !important; }
+abbr[data-title] {
+	position: relative;
+	text-decoration: underline dotted;
+}
+abbr[data-title]:hover::after, abbr[data-title]:focus::after {
+	content: attr(data-title);
+	position: absolute;
+	left: 0;
+	bottom: -2.1em;
+	width: auto;
+	white-space: nowrap;
+	background-color: #DEDEDE;
+	color: #1E1E1E;
+	border-radius: 2px;
+	box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.4);
+	font-size: small;
+	padding: 3px 5px;
+}
 code, .highlight pre code {
 	padding: 0.2em 0.1em;
 	margin: 0;

site/public/www.michalspacek.cz/i/js/scripts.js

@@ -109,4 +109,16 @@ App.ready(document, function () {
 			'behavior': 'smooth',
 		});
 	}
+
+	App.on('mouseover', 'abbr', function (event) {
+		event.target.dataset.title = event.target.title;
+		event.target.removeAttribute('title');
+	});
+	App.on('mouseout', 'abbr', function (event) {
+		event.target.title = event.target.dataset.title;
+		event.target.blur();
+	});
+	for (const item of document.querySelectorAll('abbr')) {
+		item.tabIndex = 0;
+	}
 });