ContextMenu on hover

Flow
1

Hi,

I am using V12, and would like to have the menu opened automatically on mouse hover. Any suggestion how to do that?

Best regards,
Joey

2

Here’s one idea if you are using template files.

Add your context menu to the html file, register for the onmouseover event in the ready() method, and then manually open the menu in the callback. Note that the target component (with id hoverTarget below) is outside of the vaadin-context-menu element.

<dom-module id="ads-view">
<template>
...
<vaadin-button id="hoverTarget">Hover Me!</vaadin-button>
<vaadin-context-menu id="dsContextMenu">
   <template>
     <vaadin-list-box>
      <vaadin-item id="sourceMenu" disabled="true">[[contextMenuLabel]
]</vaadin-item>
      <vaadin-item on-click="onEdit">Edit</vaadin-item>
      <vaadin-item on-click="onDelete">Delete</vaadin-item>
    </vaadin-list-box>
   </template>
</vaadin-context-menu>
...
</template>
 <script>
	class ADSView extends Polymer.Element {
  		static get is() {
 			return 'ads-view';
  		}

		ready() {
			super.ready();
            ...
			var el = this;
			var hoverTarget = this.$.hoverTarget;
			hoverTarget.onmouseover = function(event) { el.onHover(event); }
        }
        
        onHover(e) {

 		    // optionally send data to server by invoking java method annotated with @ClientCallable
 		    // var nodeId = ...;
 		    // var server = this.$server;
			// server.onNodeContextMenu(nodeId);

	    	var clientX = e.clientX-15;
	    	var clientY = e.clientY-15;
	    	var event = new Object();
	    	event.target = this;
	    	event["clientX"]
 = clientX;
	    	event["clientY"]
 = clientY;
	    	event.origEvent = e;
	    	event.preventDefault = function() { this.origEvent.preventDefault(); };
	    	event.stopPropagation = function() { this.origEvent.stopPropagation(); };
	    	
 		    var contextMenu = this.$.dsContextMenu;
	    	contextMenu.open(event);
		}
		...
3

Thanks a lot. However, my scenarion needs to element APIs to generate the contextmenu and items, and then slot it into the template. I tried to set attribute of the contextmenu to openOn mouseover. It works, but has one issue: you need to click on the target for the first time, then you can open menu with mouseover Don’t know to solve the issue.

Thanks, Joey