Richer tooltips
I had already thought about this a few times, and maybe it has already been implemented somewhere in the UI, but this [comment](https://gitlab.com/gitlab-org/gitlab-ee/issues/3696#note_50067487) made me create this issue to discuss it. When hovering issuable attributes/metadata in their collapsed sidebar, we don't communicate the name of the attribute, just its value. This goes against our [tooltip guidelines](https://gitlab.com/help/development/ux_guide/components.md#tooltips): > A tooltip should be used: […] For icons that don’t have a label. So we should communicate in tooltips both the *name and value* of the issuable attributes. But we need to have a visual hierarchy that separates the name and the value, so that users don't confuse them. Here's an example of issue milestone, which also shows its due date (a third level of info): | Current | Proposal | |---|---| | ![image](/uploads/81436a55652c4c4ae153205d84970024/image.png) | ![image](/uploads/4e5917ceefc45eed8441e1832f211896/image.png) | When looking at this design, a few questions come to mind: - So, when should one use a tooltip over a popover? - Should these tooltips be a popover instead? - If so, bear in mind that we always need to show the attribute name on hover even if it's empty (e.g. just “Milestone” if no milestone is assigned) *and* there are some elements on the issuable sidebar that use tooltips (e.g. [image](/uploads/b188f8e36ccbf956dd17a41dc4dc6045/image.png) or “Move issue”) - If the purposes of tooltips and popovers are so similar, why don't we standardize their style? For your reference, the difference between popovers and tooltips as described in the [UX Guide](https://docs.gitlab.com/ce/development/ux_guide/components.html#popovers): > Popovers are different from tooltips, which do not provide rich markup and actionable items.
issue