NUX tips: Close button tooltip partially hidden on some tips

[afercia]

When the "new user experience" tips are displayed, the tips Close button tooltip is partially hidden in some tips. To reproduce, for example in Chrome:

• go to the Add New post page
• open the Chrome dev tools > Application > Storage > Local storage, and delete the entry "GUTENBERG_NUX_1" if any Edit: the storage mechanism has changed, you need now to clear the whole Gutenberg storage entry
• refresh the page
• the first tip should appear
• tab to or mouse over the Close button
• the button tooltip appears and it's fully visible:

• click on "See next tip" to go to the following tips
• tab to or mouse over the Close button
• the tooltip is partially hidden behind the tip
• worth also noting the tooltip appears in the same place where the "pulsing dot" is

Worth noting the tooltip position is dynamically calculated to stay within the viewport, and that seems to work correctly. However, seems there's something wrong with the z-index. Not sure why when the popover takes the is-bottom class it gets a lower z-index.

.components-popover:not(.is-mobile).is-bottom {
    top: 100%;
    z-index: 99990;
}

However, I guess the whole position of the tip should be reviewed, because the tooltip position conflicts with the pulsing dot.

[afercia]

Still can reproduce on current master

[aduth]

Confirmed this is still an issue as of May 31, 2019.

Debugging:

It is caused by this style, specific to bottom popovers:

gutenberg/packages/components/src/popover/style.scss

Line 126 in 1d2d1fc

z-index: z-index(".components-popover:not(.is-mobile).is-bottom");

This was introduced in #5630 (cc @faishal, @karmatosed, @jorgefilipecosta). I don't think this style should have been introduced this way, since the fix considered for #5630 is very specific to a particular popover, and should not apply inherently to any bottom-oriented popover (evidenced by this bug).

It occurs because the NUX popover and tooltip rely on a very specific relationship to place the tooltip above the NUX tip:

gutenberg/assets/stylesheets/_z-index.scss

Lines 104 to 108 in 1d2d1fc

	// Show NUX tips above popovers, wp-admin menus, submenus, and sidebar:
	".nux-dot-tip": 1000001,
	// Show tooltips above NUX tips, wp-admin menus, submenus, and sidebar:
	".components-tooltip": 1000002,

The bottom-specific styling breaks this expectation, causing the tooltip to display below:

gutenberg/assets/stylesheets/_z-index.scss

Lines 90 to 92 in 1d2d1fc

	// Shows adminbar quicklink submenu above bottom popover:
	// #wpadminbar ul li {z-index: 99999;}
	".components-popover:not(.is-mobile).is-bottom": 99990,

[noisysocks]

#18041 has addressed this by removing dot tips in lieu of a welcome guide modal.