The tags and their contents should be accessible.
@timseverien You might consider using the HTML5 figure tag along with figcaption for accessibility. This would probably require someone to wrap their image in a figure tag (or the library could do it) but for each tag, the library could create a corresponding nested figure object (styled to match the current buttons) with a hidden figcaption. This would be accessible, as the content would be available for users with screen readers; it would also be more semantic.
The button/content pair does not currently work with keyboards. The buttons are tabbable, but the content will not be shown.
Thank you so much @jedd-ahyoung. I’ve added criteria based on your comment. Could you please review them?
Looks good, but I think you've reversed figure and figcaption. The figure tag would wrap an image or an area of content, while the figcaption would actually contain the tooltip text, like so (I've added inline styles to make this more clear):
<figure id="myFigure" style="position: relative;">
<figure id="tooltip1" style="width: 5px; height: 5px; position: absolute; top: x1; left: y1">
<figcaption>My tooltip here</figcaption>
<figure id="tooltip2" style="width: 5px; height: 5px; position: absolute; top: x2; left: y2">
<figcaption>My second tooltip here</figcaption>
Based on this, you could actually style the nested figures to have width and heights, so that they could "frame" areas of sorts (like an image map, or like how you can frame faces of people in photos on facebook). Hope that made it more clear.
Clearly I was just testing your alertness... lol :D
Should be fixed now!