When we get around to this, I'm curious to know how much overlap there is with tasks like T274105. In https://www.mediawiki.org/wiki/Codex/Planned_Components we make a distinction between "Tooltips" and "Popups/Popovers", but based on the inventory in this task there may be overlap.

In T340456#9482792, @CCiufo-WMF wrote:

When we get around to this, I'm curious to know how much overlap there is with tasks like T274105. In https://www.mediawiki.org/wiki/Codex/Planned_Components we make a distinction between "Tooltips" and "Popups/Popovers", but based on the inventory in this task there may be overlap.

Included this as an open question in this task. We will need to discuss with the DST both options:

1. Include both small dark and long white as tooltips and separate them into 2 different variants (as Material does)
2. Include the small dark as tooltip and the white one as popup.

I lean towards including the white one as a separate component since I view the following visual differences between them:

I would implement Tooltip for supplementary information and short text-only texts and Popup for longer texts potentially including other content (such as icon or image).

In T340456#9484149, @bmartinezcalvo wrote:

In T340456#9482792, @CCiufo-WMF wrote:

When we get around to this, I'm curious to know how much overlap there is with tasks like T274105. In https://www.mediawiki.org/wiki/Codex/Planned_Components we make a distinction between "Tooltips" and "Popups/Popovers", but based on the inventory in this task there may be overlap.

Included this as an open question in this task. We will need to discuss with the DST both options:

1. Include both small dark and long white as tooltips and separate them into 2 different variants (as Material does)
2. Include the small dark as tooltip and the white one as popup.

I lean towards including the white one as a separate component since I view the following visual differences between them:

Tooltip	Popup
Small dark element (usually one text line)	Longer white element with long text.
Just a dark box with rounded corners.	A box with an arrow pointing to the side from which this popup emerges.
Just text	Text, icons, images, and even buttons.
Not sure if the text could support different formats such as Bold, Italic or even links.	The text within a popup could use different text formats and links could be included within the text.

I would suggest we remove visual style like backgrond colour as differentiator to which component it is.

NOTE: Currently, the white popups in our different projects are displayed when hover, so both Tooltip and Popup use the same interactive state to be displayed.

This is not strictly accurate. The tooltips which have white background that appear for example in Special:Preferences#mw-prefsection-echo appear on select, not on hover:

I would implement Tooltip for supplementary information and short text-only texts and Popup for longer texts potentially including other content (such as icon or image).

Important to determine guidance for which to use in a form if this is the direction, and also consider to what extent this should tie appearance of popovers vs tooltips. There for example are cases where the explanation of how a field or component works includes a link, icon, and/or images:

Mentor dashboard module	suggested edits task type

I think it is important, when referencing existing examples to help define what a Tooltip and Popover should be, to consider if the existing examples should be this type of interaction to begin with, or if maybe these are potentially inappropriate uses of hiding content in a container like this. I know this notion complicates this task and decision a little more, but I think it's worth questioning so we build the correct versions of these components. Not saying they are all misuses, but I think there are some that might be questionable.

In T340456#9726488, @DTorsani-WMF wrote:

I think it is important, when referencing existing examples to help define what a Tooltip and Popover should be, to consider if the existing examples should be this type of interaction to begin with, or if maybe these are potentially inappropriate uses of hiding content in a container like this. I know this notion complicates this task and decision a little more, but I think it's worth questioning so we build the correct versions of these components. Not saying they are all misuses, but I think there are some that might be questionable.

Agree the guidelines of what is a tooltip makes sense to define. It seems like there are two competing definitions of tooltips here – the hover text-only one and the on-select one with ability to include more structured and interactive content like heading and paragraphs, links,image, icons, etc. My understanding of it being more the latter is based on the definition of how it is a "planned component" based on multiple use cases across Wikimedia products and per the Tooltip row in T277047: Design inventory of Wikiverse (Codex design system, OOUI, MediaWiki widgets) UI components referencing it as a core component and linking to the OOUI demo:

It is slightly confusing, since the OOUI component itself is called PopupButtonWidget, but as there is no PopUp component captured, what I believe to be the case is that this task is about providing a tooltip/popup/helper needed for Codex to replace the many different places currently using the OOUI version.

Maybe @Volker_E who originated the inventory task or @CCiufo-WMF can weigh in about whether this should be separated into two tasks, and if in fact it is a separate "popup tips" component that is needed, distinct from tooltips.

After poking at this for bit, I think there is some confusing overlap between the Menu, Popover, and Dialog components. For this specific task I'd like to propose focusing on the most simple version of a tooltip with a draft definition of: "Tooltips are brief labels explaining UI elements, triggered by hover, focus, tap, or click.". These don't include any links, buttons, etc.

Here are example screenshots of a Tooltip from Material Design, Polaris, and Carbon.

The secondary part of my proposal is that we create a separate task where we dig into popovers and make sure the definition and use case is clear. For example: Various other systems combine menu's and popovers...do we need to reconsider the buckets of everything that is an overlay of any sort? There is a world where that exploration could bring it back to the tooltip (Simple vs Rich tooltip) but separating these into distinct buckets should help us keep things moving.

Anyone oppose this idea? If not, @JFernandez-WMF we don't expect you to solve both of these. I'd lean towards you taking on the simple tooltip but I'll leave that up to you.

Our list of planned components has separate entries for a "Tooltip" and "Popup/Popover" component. As I mentioned in T340456#9482792, I worry this task conflates the two. The immediate need for a Tooltip component is to unblock T338282: Label: Add tooltip, which would be used by Wikidata's Query Builder and for Community Configuration 2.0. As I understand it, these are pretty simple use cases where all that's needed is providing brief supplementary information. Whether it appears only on hover or can also be activated through some other event is something I leave to the designers based on the need for touchscreen support / accessibility reasons.

In my opinion, we should keep the scope of this task small based on the needs we know of, while leaving the door open to either a) adding new functionality to this component which supports some of the more complex use cases or b) create a separate Popup/Popovers component.

After discussion with Chris and Julieta, we will keep the Tooltip component separate from the Popover component, which has its own task.

Julieta will continue forward with contributing the Tooltip component to Codex. Further definition and functionality is to be determined and will be updated in this task as that understanding becomes available.

El T340456#9742018, @DTorsani-WMF escribió:

After discussion with Chris and Julieta, we will keep the Tooltip component separate from the Popover component, which has its own task.

Julieta will continue forward with contributing the Tooltip component to Codex. Further definition and functionality is to be determined and will be updated in this task as that understanding becomes available.

Thank you @DTorsani-WMF. To avoid confusion, I've removed some of the use cases in this Tooltip task since they were Popups/Popovers instead and they were duplicated in T363375: [EPIC] Popover: Add Popover component to Codex.

Regarding Label's info icon, in case we want to separate into Tooltip and Popover components, I think this Label's case would be covered with a Popover instead. So I would also remove these Label use cases from this task and I would redefine T338282: Label: Add tooltip to indicate that it will use a Popover instead.

Okay thanks @bmartinezcalvo! We are still working through the exact definitions of Tooltip, so I will update these once we have a bit more clarity on that.

Change #1027265 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[design/codex@main] [WIP] Tooltip component (directive)

https://gerrit.wikimedia.org/r/1027265

I'd like to keep this component on the DST roadmap. @DTorsani-WMF I'm co-assigning you to T364638. Let's use that one on our sprint boards.

Change #1027265 merged by jenkins-bot:

[design/codex@main] Tooltip: Introduce WIP component (directive)

https://gerrit.wikimedia.org/r/1027265

Change #1049640 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from 1.7.0 to 1.8.0

https://gerrit.wikimedia.org/r/1049640

Test wiki created on Patch demo by EGardner (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/f74be9bc8e/w

Change #1049640 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from 1.7.0 to 1.8.0

https://gerrit.wikimedia.org/r/1049640

I think we are ready to resolve this task -- @JFernandez-WMF would you like the honors?