Lab: abbr on touch devices

Standard abbr

Intro:
This is just an example of the native behavior of an abbr element with a title attribute with nothing new added.
HTML: 
<abbr title="National Aeronautics and Space Administration">NASA</abbr>
CSS:
JS:
Test:
Hover over the abbr below to see the native effect:
NASA
Result:
This works fine on mouse devices, but does nothing on touch devices.

Standard abbr with tabindex

Intro:
Starting with the above, standard abbr element, I add a tabindex, hoping this will allow the element to receive :focus. Then I add a little extra CSS to display the title when the element receives :focus (and remains :active); the ID in the CSS is only to scope this CSS to this method.
HTML: 
<abbr tabindex="0" title="National Aeronautics and Space Administration">NASA</abbr>
CSS:
JS:
Test:
Hover over the abbr below to see the native effect, touch or click to see the added effect:
NASA
Result:
Mouse devices still get the native effect on :hover (and they can click to see the added effect), and touch device users can now touch to see a tooltip. However, this doesn't work on iOS devices... Additionally, depending on where the abbr is on screen, and how wide the screen is, the generated content some times goes off-screen...

Standard abbr and generated content

Intro:
Removing the tabindex I added above, this goes back to nothing but the native HTML element with a title attribute, and uses a @media breakpoint to toggle displaying or hiding the abbr description via generated content. The ID in the CSS is only to scope this CSS to this method.
HTML: 
<abbr title="National Aeronautics and Space Administration">NASA</abbr>
CSS:
JS:
Test:
On all devices, on screens smaller than 768px wide, the abbr element will be followed by the definition in paranthesis, and on screens larger than 768px wide, the definition will revert to the native behavior:
NASA
Result:
This works fine on all devices, but the definition is added after all abbr elements on small screens1. Additionally, this method suffers from having to pick a "magic number" to indicate when the transition should happen. I'm using 768px in this example, but what happens on touch devices that are wider than that? This method also has to assume that devices smaller than the magic number are touch devices, and larger are not...
1 This might not be so bad, if you're using abbr correctly. According to the abbr spec, you only need to provide the definition in the first instance, and for any other instances of that same abbr you could remove the title attribute. This means users would only see the definition following that first instance, and the others would simply be the abbreviation. This is also the most consistent behavior with standard print reading, where the first instance would define the abbreviation, and subsequent instances would not. But, in this case, I would say get rid of the @media breakpoint and just do this for all devices, regardless or their size.

Standard abbr, using JS test for touch capabilities

Intro:
This uses the same generated content method to display the definition, but rather than relying on some magic number and treating all devices the same based on that magic number, I only display the description on devices that have touch capabilities. The ID in the CSS is only to scope this CSS to this method.
HTML: 
<abbr title="National Aeronautics and Space Administration">NASA</abbr>
CSS:
JS:
Test:
On touch-capable devices, the abbr element will be followed by the definition in paranthesis, otherwise the definition will revert to the native behavior:
NASA
Result:
This works well for distinguishing if the device has touch capabilities, but that does not necessarily mean it is a touch device. A minor drawback is that this relies on JS, and maybe a little larger concern is that if the JS test happens after the content loads, it will cause a repaint.

Standard abbr, adding the title attribute to only the first instance

Intro:
As I mentioned in the footnote of the first generated content method, the W3C's abbr spec suggests you only need to provide the definition in the first instance of any abbr, and for any other instances of that same abbr you could skip the title attribute.
HTML: 
<abbr title="National Aeronautics and Space Administration">NASA</abbr>
<abbr>NASA</abbr>
CSS:
JS:
Test:
The first abbr element in the paragraph below will be followed by the definition in paranthesis; others will look like normal text:
Lorem ipsum dolor sit amet NASA, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua NASA. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat NASA.
Result:
This is the most consistent behavior with standard print reading, where the first instance would define the abbreviation, and subsequent instances would not. The one concern here is that the onus goes to the author to remember to add a title attribute to the first instance of each abbr, and not to any that follow.