Menu tooltips obscured by menu items

Menu items descriptions (tooltips) are only partially visible or even quite invisible because they are obscured by the same or other menu items. Can anybody show a way to avoid this until my ticket will be completed ?

protected void init(VaadinRequest request)
{
  final VerticalLayout layout = new VerticalLayout();
  setContent(layout);
  MenuBar menubar = new MenuBar();
  MenuItem menuitem = menubar.addItem("Menu item", null, null);
  menuitem.setDescription("Menu item description");
  MenuItem submenuitem1 = menuitem.addItem("Submenu item 1", null, null);
  submenuitem1.setDescription("Submenu item 1 description");
  MenuItem submenuitem2 = menuitem.addItem("Submenu item 2", null, null);
  submenuitem2.setDescription("Submenu item 2 description");
  layout.addComponent(menubar);
}

18439.jpg

Ok, you are talking about
#14854
. I just tried how it works with MenuBar and indeed the tooltips are broken in 7.4.0.

Both tooltips and MenuBar’s pop-ups are overlays displayed in the v-overlay-container element. Apparently, they both have z-index=20000, and v-menubar-popup comes after v-tooltip, so it will be in front of the tooltip.

How to work around that… It looks like you can’t override them in CSS - the z-indexes are set as element attributes, and are “presentational” according to CSS rules, so they always override any CSS settings. So, you’d need to fix that in the client-side code, more exactly in the VTooltip. VOverlay has default zIndex 20000 and VTooltip should probably override that with something higher. I don’t know if there’s any case where a tooltip should be obscured by other popup content.

Oops, sorry, it’s defined in the styles, not z-index attribute, I had some helf-blind moment there. Therefore you can override it in CSS with !important.

Something like:

.v-overlay-container .v-tooltip { z-index: 30000 !important; } This needs to be done in the
styles.scss
file
outside
the theme selector nesting, because the overlays are contained outside the UI element.

Workaround works exactly as you described.
So maybe the #14854 can be easily fixed in the next release ? The default may be annoying for people without css skills - like me.
Anyway, thank you very much for express answer.