[tooltip] Bikeshed the name for a popovertargetaction value to hover/focus trigger

[mfreed7]

See this discussion, but the current proposal is to do "hover triggering" via a new value for the popovertargetaction attribute:

<button popovertarget=foo popovertargetaction=hover>
  Hover me!
</button>
<div popover id=foo> Popover </div>

However, "hover" triggering doesn't tell the whole story, since keyboard users need focus to trigger the popover, and touch users need long press to trigger it. So the question is: what should this value be called?

Here are some ideas I've heard, please feel free to add more:

• popovertargetaction=hover
• popovertargetaction=over
• popovertargetaction=active
• popovertargetaction=interest
• {your idea here}

[brechtDR]

Some other values that come to mind (not that I think they're better, but just brainstorming):

• focus (as this feels more on focus and hover, at least, feels like it)
• indeterminate
• float
• temp (or temporary)

One thing we might need to take account, is that some devs might want to trigger a popover on toggle for mobile devices and use the hover/focus state on the desktop versions. Although that a focus state kind of feels the same, so I guess that will be good enough for this?

[kbrilla]

thumb up for popovertargetaction=interest

Waht more :interest pseudo would be great - so it would jump to element that we are activly interacting with - so keybord interaction switching focus would give :interest to that element but then mouse move, touch long-press, would move interest to element under mouse, then again mouse keybord interaction would again move :intrest to that element.

[css-meeting-bot]

The Open UI Community Group just discussed [tooltip] Bikeshed the name for a popovertargetaction value to hover/focus trigger.

The full IRC log of that discussion

<gregwhitworth> Topic: [tooltip] Bikeshed the name for a popovertargetaction value to hover/focus trigger
<gregwhitworth> github: https://github.com//issues/767
<hdv> masonf: I just wrote an explainer for this, working on popover=hint and triggering additions that we had in the original proposal
<hdv> masonf: this is one of the new things, we need to add a new value to popover that indicates that the popover should be triggered when the element is hovered, keyboard focused and long pressed on mobile
<gregwhitworth> q?
<hdv> masonf: would be best if we had a word that encompasses all of those things
<hdv> s/a//one
<hdv> s//one/one
<hdv> masonf: one use case is a popover that triggers something when you hover and something slightly different when you click
<hdv> masonf: a related issue, at the WHATWG repo, is an attribute that would allow declarative setting up of triggering modal dialogs
<hdv> gregwhitworth: were there any names you wanted to propose?
<hdv> masonf: there is a list on the issue, several lists actually
<dbaron> related whatwg issue mason mentioned is https://github.com/whatwg/html/pull/9456
<hdv> masonf: hover, over, active, interest, indeterminate, hint, float… there is a bunch
<hdv> gregwhitworth: folks, if you have any other names, go to the issue
<gregwhitworth> q?
<hdv> annevk: one thing I wanted to note… there is also other proposals for new button attributes, like dialogmodaltarget, which might feel like something similar, maybe we should spend more time to figure out what a more generic mechanism would be like
<hdv> annevk: maybe you would also want to dismiss or toggle a dialog
<hdv> annevk: especially if there might be other things we want to target in the future, we might want something more generic… the thing you want to target, the action you want it to trigger on and the reason you want the action… we probably want to avoid having dozens of attributes in the future
<hdv> ntim: if we have multiple declarative attributes, it is also unclear which one takes precedence
<hdv> gregwhitworth: maybe we can action you, masonf, to summarise this discussion in 9456?
<hdv> masonf: maybe even agenda+ 9456 here?
<hdv> scotto: yes agree we should want to discuss this more holistically
<hdv> scotto: there could be all sorts of scenarios we probably want to avoid, like opening a modal dialog on hover
<gregwhitworth> ACTION: masonf to sum up in a comment the relationship with 9456 and annek and bring back to the group when there is something to resolve against

[bkardell]

linking this mentioned as related/relevant so that you don't have to drill into minutes to find it: whatwg/html#9456

[mfreed7]

So quick summary of the discussion above:

• Please read add dialogmodaltarget attribute whatwg/html#9456, since it's quite related.
• That talks about a "more general" triggering mechanism for not just popovers, but also dialogs and other things. It is nominally orthogonal to this issue, which talks about which word to use to describe "hover or keyboard focus or long press".
• For that last question, the options I've heard are:
  • popovertargetaction=active
  • popovertargetaction=float
  • popovertargetaction=focus
  • popovertargetaction=hover
  • popovertargetaction=indeterminate
  • popovertargetaction=interest
  • popovertargetaction=over
  • popovertargetaction=temp
  • popovertargetaction=temporary

[keithamus]

I'll put some opinions down on the proposed options, hopefully useful (and hopefully informative for those just landing on this discussion). The TLDR is, in my humble opinion, that focus, over, and interest are the top candidates:

• active: :active exists in CSS, and is applied to <a> and <button>s which are being depressed. As this behaviour is related to interaction, but is quite different from the proposed hint popover behaviour, this could be confusing.
• float: float: exists in CSS and has a very different meaning. It's popularity is waning in modern CSS (although it was on 80% of page loads that Chrome saw in the last 24h). Self documenting code is subjective but I'd speculate canvasing developers and asking what popovertargetaction=float would do, a minority of the answers would be correct.
• focus: :focus exists in CSS and is very close to the interaction model for popover hints, to the point where this could be a top choice in my mind. However the interaction models are subtly different which might cause frustration in the community as it sets false expectations. :focus won't be applied to elements that are hovered with a mouse but the intent is for a mouse hover to enact a hint popover. False expectations could lead to developer frustration.
• hover: :hover exists in CSS, so this has the same shape of problems as :focus, but worse; :hover is applied when a pointer device moves on top of an element, but it excludes touch/keyboard (which the popover=hint proposal does not). Due to the exclusionary nature of :hover in CSS, adding hover here may carry over the same negative connotations.
• indeterminate: This is the longest and most difficult to spell which causes genuine difficulties for folks such as those with dyslexia or those for which English is a second language. It also exists as an attribute for checkboxes to display a checkbox which is neither checked nor unchecked. I'm not sure how the meaning applies to hint popovers.
• interest: This has no current precedent in HTML, CSS or JS vernacular which is a nice benefit. It's ambiguous enough to encompass the interaction models without being too ambiguous. Or is it too ambiguous?
• over: The word itself has no precedent in HTML or CSS or JSS but it's very close to others - hover, overflow, mouseover. It may cause confusion in that regard. It may be mistaken for a typo of hover.
• temp/temporary: This describes the temporary nature of the hint popover but doesn't hint toward the interaction model. temp as a contraction of temporary is a slightly odd choice given the attribute name is popovertargetaction.

[mfreed7]

Ok, please see the very nice summary above. But let's vote:

• 👍 popovertargetaction=focus
• 👎 popovertargetaction=over
• 😀 popovertargetaction=interest
• 🎉 popovertargetaction=active
• 😐 popovertargetaction=indeterminate
• ♥️ popovertargetaction=float
• 🚀 popovertargetaction=hover
• 👀 popovertargetaction=temp/temporary

Please use the emoji button on Github that relates to the option you'd like to vote. Please vote only once.

[keithamus]

(Not to derail but we could use a poll)

[mfreed7]

(Not to derail but we could use a poll)

Cool! Guess I should have known about that feature. Let’s let this one go as-is since there are already votes. But next time for sure - that’s a lot easier than trying to find the correct “meh” face for the poll.

[css-meeting-bot]

The Open UI Community Group just discussed popovertarget action naming bikeshed, and agreed to the following:

• RESOLVED: Use popovertargetaction=interest.

The full IRC log of that discussion

<gregwhitworth> Topic: popovertarget action naming bikeshed
<gregwhitworth> github: https://github.com//issues/767#issuecomment-1634801385
<hdv> masonf: this is about adding a new trigger for popovers
<hdv> masonf: Keith has gone through the different naming options, which was great
<gregwhitworth> q?
<hdv> masonf: the advantage of the current runner up, `popovertargetaction=interest`, is that 'interest' does not exist
<hdv> q+
<gregwhitworth> ack hdv
<masonf> Proposed resolution: Use popovertargetaction=interest.
<gregwhitworth> hdv: wanted to +1 the list that kieth made was really useful and I like interest
<masonf> RESOLVED: Use popovertargetaction=interest.
<hdv> s/exist/exist as a thing in CSS yet (like active and focus0