csscade,
@csscade@mastodon.social avatar

Okay, so when making a popover I think the logic should go something like this:

  1. Use title if the content of the popover is just text.

  2. Use the popover attribute if the content is more than plain text and like a menu of options or something.

  3. Use <dialog> if you need to force the user to make a decision or block all other interactions on the page.

https://www.csscade.com/popover-api

SaraSoueidan,
@SaraSoueidan@front-end.social avatar

@csscade Don't use the title attribute. It's not useful for most users and not accessible for many of them. https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/#:~:text=It%20is%20primarily%20displayed%20as,able%20to%20interact%20with%20it.

Using the popover attribute for plain text is good because it provides the interactions needed for all users to toggle and see the text. That's not possible with title.

hdv,
@hdv@front-end.social avatar

@SaraSoueidan @csscade yup , +1 to what Sara says, would skip (1) and go straight for making a custom tooltip, even for plain text!

(and with the popover attribute, you can have it in top layer, and get some keyboard behaviours and aria-expanded state built in)

tbroyer,
@tbroyer@piaille.fr avatar

@hdv @SaraSoueidan @csscade …now waiting for anchor positioning to make it even easier to position those tooltips (a coworker noted last week when popover became "baseline" that it wasn't really useful without anchor positioning)

yatil,
@yatil@yatil.social avatar
  • All
  • Subscribed
  • Moderated
  • Favorites
  • random
  • ngwrru68w68
  • rosin
  • GTA5RPClips
  • osvaldo12
  • love
  • Youngstown
  • slotface
  • khanakhh
  • everett
  • kavyap
  • mdbf
  • DreamBathrooms
  • thenastyranch
  • magazineikmin
  • anitta
  • InstantRegret
  • normalnudes
  • tacticalgear
  • cubers
  • ethstaker
  • modclub
  • cisconetworking
  • Durango
  • provamag3
  • tester
  • Leos
  • megavids
  • JUstTest
  • All magazines