Context on a Button

Webix JS
#1

I am trying to set up a context item with simple text “Click here” on a button. I tried to set the “master” of the context to the webix ID of the button, but there is an error “Invalid node as target for webix.event”.

How do I:

  1. Set the context to the button
  2. Programmatically show the context (without right-clicking) and then have it hide on its own (using a timer or something similar).

Thanks.

#2

It depends on what exactly you need for your button:

(1) If you want to show a “Click here” text on hovering the button,
you can define the tooltip property and get a simple HTML tooltip for the button:

{ view:"button", tooltip:"Click me"}

https://webix.com/snippet/eda0d68f

(2) If you want to show a popup on right-clicking, you can provide a context component for the button. The correct way to set a Webix component as a master for the context is pointing to its topmost HTML element as component.$view:

{ view:"context", master:$$("mybutton").$view }

https://webix.com/snippet/33a23b9b

(3) And finally, you can attach a popup to the button that will apeear on left-clicking by pointing to its id:

{ view:"button",   popup:"mypopup" }

https://webix.com/snippet/1e399714

#3

Ok, but how do you programmatically trigger the context menu? Not on hover, not on left-click and not on right-click.

Something like $$(“myButton”).showContext();

#4

You can call the show() method of a Popup or Context (both of them are just windows) and pass a button’s node as a parameter to set the correct position:

$$("mypopup").show($$("mybutton").getInputNode());

Here’s the snippet: https://webix.com/snippet/896021e2