[openstreetmap/openstreetmap-website] Timestamps across the web site / make format user selectable (#631)

[Luc Gommans]

Been meaning to find the right file to commit this into and propose it as pull request but I keep not getting around to it...

Simple CSS-only solution that doesn't change anything else except lets you see the title text for `abbr` elements on mobile and desktop consistently:

![screenshot of a webpage, the URL bar shows test.html and the page contains a sentence with a tooltip in the middle, triggered (in this case) by positioning the mouse over it](https://github.com/user-attachments/assets/a38b02f5-216c-4de9-a995-4f6f1f5415f4)

(The cursor is actually a hand/pointer; screenshot software does not capture that.)

```html
<style>
    abbr[title] {
        position: relative;

        /* ensure consistent styling across browsers */
        text-decoration: underline dotted;
    }

    abbr[title]:hover::after,
    abbr[title]:focus::after {
        content: attr(title);

        /* position tooltip like the native one */
        position: absolute;
        left: 0;
        bottom: -30px;
        width: auto;
        white-space: nowrap;

        /* style tooltip */
        background-color: #1e1e1e;
        color: #fff;
        border-radius: 3px;
        box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.4);
        font-size: 14px;
        padding: 3px 5px;
    }
</style>
<a href="/issues/">There are <abbr title="seven!" tabindex=0>how many?</abbr> issues with this approach!</a>
```

CSS from <https://stackoverflow.com/a/69353021/1201863>. Tested that the code works in normal text and also nested, for example in an `<a>` link

The `tabindex` makes it selectable such that screen reader users can hopefully also open it. Regarding the value, [MDN says](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) `tabindex=0` "means that the element should be focusable in sequential keyboard navigation" -- it does *not* put it at the top of the tab stack!

Hopefully this covers everyone's (accessibility) requirements by looking like what people expect from a tooltip while also not requiring javascript. I'm kind of blown away that mobile browsers, after all these years, still can't just do tooltips natively...

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/631#issuecomment-2423281118
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/issues/631/2423281118 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20241018/cfcbe3e0/attachment.htm>