tooltips on timeline about collectionbuilder-cdm-template

[evanwill]

I unintentionally (because I was talking to Olivia and not paying attention) updated this in master to a more accessible, yet oddly annoying version (because tooltip pops up in the middle of the image, rather than at the bottom).
It is really is much better accessibility wise (from not at all, to actually sort of useful). But not sure it is a good solution.

[owikle]

Another solution: we were also thinking about just getting rid of the tooltip altogether and only using it on pdf collections...

[dcnb]

I added a "tooltip" branch that makes that tag's display property "inline-flex"

This seems to keep the accessibility feature and the former way of using the tooltip. I also got rid of the tooltip delay feature on the javascript snippet, as it seemed unnecessary, but I didn't know if that was an accessibility piece or not. Was it?

I like the tooltips for use on non-mobile. I feel like they invite investigation and they keep the page really clean.

I see how they're not that useful on mobile, but I don't think that's a terrible thing. We could experiment with adding some info that only appears on mobile?

I'm glad to fix the accessibility though and to keep the functionality as it was. Evan, if you think this acceptable, I'd like to add it in.

[evanwill]

The accessibility is fine (test by clicking tab and going through the page--it needs to display when focused). I think I would use bootstrap d-inline-flex rather than create a custom style for it.

But I don't like it because this introduces weird implications to sizing that don't make sense, and distort image ratios and spacing (there might be a way to fix it by making sure it is all styled by flex, rather than a mix, but I don't really understand why it sort of works, so not sure how to fix it).

Look close at the thumbs and toggle it on and off:

• When normal, it displays the thumb at the natural ratio--height is set at 110px by css, then width is set following the original aspect ratio based on the intrinsic size.
• When inline-flex, the image ends up getting pulled into a ratio based on the box size (or something?), so you end up with distorted ratios. For what ever reason, the image is now 100px height, and then some calculation creates odd distorted ratios for narrow images to make them more square (making them wider--pdfs looks weirdly wide and people fat) and spacing between images becomes inconsistent. I don't really understand.

I added the tooltip delay just because I thought it looked a bit less tweaky as you are going through.

[evanwill]

hey @dcnb try just d-inline-block instead, seems to do the same thing to the tool tip without introducing weirdness?