User centered tooltip: overlapping tooltips on hover with different information types

Summary

When hovering on a user name in GitLab that has a status attached to it, in order to see the user details in the extended tooltip https://gitlab.com/gitlab-org/gitlab-ce/issues/50157, a total of 3 tooltips are displayed in a messy overlay:

  1. The "user", with some of the profile information https://gitlab.com/gitlab-org/gitlab-ce/issues/50157
  2. A black tooltip, the status information
  3. A browser default tooltip, with the emoji name

Steps to reproduce

In GitLab, hover a user profile name that has a status attached to it (with an emoji).

Example Project

gitlab-org/gitlab-services/design.gitlab.com#247 (comment 195833705)

What is the current bug behavior?

3 different tooltips for 3 different informations are being displayed on hover.

What is the expected correct behavior?

Only 1 tooltip displayed on hover (with the user profile information).

Relevant logs and/or screenshots

Screen_Shot_2019-08-05_at_20.34.54

Output of checks

This bug happens on GitLab.com

Possible fixes

  • The status information should not be displayed in a black tooltip. Instead shown inside the user profile (white tooltip/popover).

  • The browser tooltip should be displayed only if the user hovers on the emoji, which should not trigger any other tooltips. Hovering the user name displays the user tooltip (with profile info)