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

[Luc Gommans via rails-dev]

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/2423281...@github.com>
_______________________________________________
rails-dev mailing list
rails-dev@openstreetmap.org
https://lists.openstreetmap.org/listinfo/rails-dev