Make subtle abbreviations accessible on mobile

[chances]

The subtle abbreviations in my blog posts (à la, title text on XKCD) are not accessible on mobile devices because there's no cursor and no mouse to hover to show the tooltips.

• Add an unobtrusive fixed panel to the bottom of the page that displays the title text onTouchEnd.
• Only show the panel if the user used one finger to touch the abbreviation and did not move their finger within a reasonable threshold. (What's a reasonable threshold?)

CSS fallback

abbr[title] {
    cursor: help;
    text-decoration: none;
    border-bottom: 1px dotted #e5e5e5;
}
// With mobile-ish media query
abbr[title]:focus ~ .subtitle {
    text-align: center;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0.5rem 0;
    border-top: 1px solid #eee;
    background: white;
}

Adapted from this Stack Overflow answer.

[chances]

Won't fix: See #13