FR: MenuItems should allow tooltips

[kmwhelan93]

Especially if a menu item is disabled, a tooltip explanation would be very helpful for users.

Note: I can make this work currently by casting my tooltip with type any and setting it as the text prop.

[giladgray]

oh goodness we decided many moons ago against supporting tooltips on menus for several reasons:

1. no other menu system does this. see OS X disabled menu items. they never have tooltips.
2. menus are typically shown in Popovers, and tooltips are also Popovers. things can easily get weird when you nest Popovers, so we just avoid that composition when possible.

[kmwhelan93]

Makes sense. Seems like a reasonable decision.

However, I noticed that iOS uses disabled menu items as headers for a menu, which is a different use case than mine. In my case, when someone is used to being able to do something, but cannot in this specific situation, they need some kind of explanation. To me, the cleanest way to present that information is with a hover. ex:

There also seems to be several other use cases with similar requests given responses in Slack.

Regardless, I'm happy with this being officially unsupported so long as it continues to be allowed in at least some way. For reference, here is how to get this working correctly at the moment.

[llorca]

Glad there's a workaround for it. We'll keep this open for discussion but it's very low priority for us at the moment

[ashleydavis]

It's pretty important to be able to have tooltips on menu items.

The work around I'm using is to modify the display attribute on the popup target when it appears within a menu item:

.bp3-menu .bp3-popover-target {
    display: block;
}

[giladgray]

yes i've seen this use case a lot lately so i'm going to re-open to track implementing next year.

[andrewtsun25]

hey guys! given Blueprint 3, I've found a workaround that could give Tooltips to MenuItem components without flickering and retaining original functionality as best as possible. only disadvantage here is overflow is not prevented.

<Tooltip
    modifiers={{
        flip: { enabled: false },
        preventOverflow: { enabled: false }
    }}
    content={"Your content here"}
    position={Position.RIGHT}
    className={styles.displayBlock}
    targetClassName={styles.fullWidth}
    >
        <MenuItem ... />
 </Tooltip>

where the styles are defined as:

.fullWidth {
    width: 100%;
}

.displayBlock {
    display: block;
}

[DanHarman]

This is a little more painful in Suggests etc. If you use MenuItems in the popup, if you wrap them in a tooltip, the scroll to selected item breaks. Not sure on cause yet.