How to add tooltips to menu entries?

[Konrad Höffner]

I want to add mouseover tooltips to menu entries, however the HTML title attribute does not work, I assume this has something to do with the mouse being down.

I also tried to add the following to my CSS but this does not work as well: span[data-tooltip]:hover::after {content: attr(data-tooltip); background: #e5e5e5; position: absolute; top: -10px; left: 0; right: 0; z-index: 1000;}

I then tried to find some class that identifies the currently hovered one but I did not find any change in the class for that one in the Firefox developer console.

Is there some way to add tooltips to menu entries and if yes, how?

[Max Franz]

Probably a Tippy on the content itself.

[Konrad Höffner]

I am trying to initialize Tippy with the context menu entries but cxtmenu-content entries don't seem to exist when the content menu is not yet shown so I cannot set this up beforehand.

Is there some way to attach an event listener to a context menu so that I can dynamically set up the Tippy entries after the menu opens? However then there is still the problem that the cxtmenu-content entries don't have an id, is there a way to assign ids to them?

[Konrad Höffner]

Solution

After a large amount of trial and error, I finally figured out a workaround to get Tippy to work with the context menu!

content: '<img src onerror="tippy(\'span\')"><span data-tippy-content="Tooltip">edit/report</span>',
contentStyle: {"pointer-events": "all"},

Challenges

• The menu items don't have an ID, so we can't initialize Tippy for them from the outside. Also, the menu items don't not exist at document load time, so it is impossible to set the Tippy beforehand. Thus we need to set up the Tippy at menu opening time.
• However there is no hook to get code in at generation time. <span onload="tippy(...)"> does not work because the onload tag only works on the body and a few other tags and triggers at document load time. This was "solved" with a purposefully incorrect img element in conjunction with the onerror tag.
• Pointer events were deactivated with "point-events:none" for the menu element. This was solved by enabling pointer-events in "contentStyle".

Outlook

This is of course just a quick hack that is very unelegant and not guaranteed to work in all browsers and versions. If more people need this functionality, it would be great if there could be more support for tooltips. My wishlist for this is:

• giving IDs to the menu elements (e.g. with an optional "id" attribute), so we can use Tippy
• pregenerating the menu items so that Tippy can be set up after document load time.
• enabling pointer events by default for the parent of the content (i.e. the last element down in the hierarchy).

[Max Franz]

The menu items don't have an ID, so we can't initialize Tippy for them from the outside. Also, the menu items don't not exist at document load time, so it is impossible to set the Tippy beforehand. Thus we need to set up the Tippy at menu opening time.

I think you should be able to specify your command.content to take up the whole space and to have an ID. I think it can be a HTMLElement, which you can later pass to Tippy.

However there is no hook to get code in at generation time. does not work because the onload tag only works on the body and a few other tags and triggers at document load time. This was "solved" with a purposefully incorrect img element in conjunction with the onerror tag.

If you create a HTMLElement, then you can pass that reference to Tippy. However, I'm not sure whether Tippy expects the element to be in the DOM tree at initialisation or at show time.

Pointer events were deactivated with "point-events:none" for the menu element. This was solved by enabling pointer-events in "contentStyle".

This is probably necessary to avoid conflicting gestures. You should be able to show a Tippy manually rather than on a particular event.

[stale]

This issue has been automatically marked as stale, because it has not had activity within the past 30 days. It will be closed if no further activity occurs within the next 30 days. If a feature request is important to you, please consider making a pull request. Thank you for your contributions.

[Denny Müller]

I have the same task to solve:

For documentation purposes here is my solution:

    const icon = document.createElement('i');
    icon.className = iconClass;
    icon.addEventListener('DOMNodeInserted', () => {
      const tooltip = tippy(icon.parentElement, {
        trigger: 'manual',
        content: () => {
          const content = document.createElement('div');

          content.innerHTML = tooltipText;

          return content;
        }
      });
      icon.parentElement.addEventListener('mouseover', () => {
        tooltip.show();
      });
      icon.parentElement.addEventListener('mouseleave', () => tooltip.hide());

      icon.addEventListener('DOMNodeInserted', () => {
        tooltip.hide();
        tooltip.destroy();
      });
    });
    return icon;

I'm creating the icon element and as soon as it gets rendered, i grab his parent (created by the context menu itself) and attach tippy to it. This removes then neccessarity to style the icon itself. Any styling on the icon led to a misplacement of the icon in the radial menu.