Class zebkit.ui.TooltipManager
extends <zebkit.ui.event.Manager>
<zebkit.ui>

Popup window manager class. The manager registering and triggers showing context popup menu and tooltips. Menu appearing is triggered by right pointer click or double fingers touch event. To bind a popup menu to an UI component you can either set "tooltip" property of the component with a popup menu instance:

       // create canvas
       var canvas = new zebkit.ui.zCanvas();

       // create menu with three items
       var m = new zebkit.ui.Menu();
       m.add("Menu Item 1");
       m.add("Menu Item 2");
       m.add("Menu Item 3");

       // bind the menu to root panel
       canvas.root.popup = m;

Or implement "getPopup(target,x,y)" method that can rule showing popup menu depending on the current cursor location:

       // create canvas
       var canvas = new zebkit.ui.zCanvas();

       // visualize 50x50 pixels hot component spot
       // to which the context menu is bound
       canvas.root.paint = function(g) {
           g.setColor("red");
           g.fillRect(50,50,50,50);
       }

       // create menu with three items
       var m = new zebkit.ui.Menu();
       m.add("Menu Item 1");
       m.add("Menu Item 2");
       m.add("Menu Item 3");

       // implement "getPopup" method that shows popup menu only
       // if pointer cursor located at red rectangular area of the
       // component
       canvas.root.getPopup = function(target, x, y) {
           // test if pointer cursor position is in red spot area
           // and return context menu if it is true
           if (x > 50 && y > 50 && x < 100 && y <  100)  {
               return m;
           }
           return null;
       }

Defining a tooltip for an UI component follows the same approach. Other you define set "tooltip" property of your component with a component that has to be shown as the tooltip:

        // create canvas
        var canvas = new zebkit.ui.zCanvas();

        // create tooltip
        var t = new zebkit.ui.Label("Tooltip");
        t.setBorder("plain");
        t.setBackground("yellow");
        t.setPadding(6);

        // bind the tooltip to root panel
        canvas.root.popup = t;

Or you can implement "getTooltip(target,x,y)" method if the tooltip showing depends on the pointer cursor location:

       // create canvas
       var canvas = new zebkit.ui.zCanvas();

       // create tooltip
       var t = new zebkit.ui.Label("Tooltip");
       t.setBorder("plain");
       t.setBackground("yellow");
       t.setPadding(6);

       // bind the tooltip to root panel
       canvas.root.getPopup = function(target, x, y) {
           return x < 10 && y < 10 ? t : null;
       };
Constructor:
zebkit.ui.TooltipManager ( )



public void hideTooltip ( )
public void pointerClicked (e)
public void pointerEntered (e)
public void pointerExited (e)
public void pointerMoved (e)
public void pointerPressed (e)
public void pointerReleased (e)
private void run (t)
private void stopShowingTooltip ( )

public void hideTooltip ( )

Hide tooltip if it has been shown

public void pointerClicked (e)

Define pointer clicked event handler


Parameters:
public void pointerEntered (e)

Define pointer entered event handler


Parameters:
public void pointerExited (e)

Define pointer exited event handler


Parameters:
public void pointerMoved (e)

Define pointer moved event handler


Parameters:
public void pointerPressed (e)

Define pointer pressed event handler


Parameters:
public void pointerReleased (e)

Define pointer released event handler


Parameters:
private void run (t)

Task body method


Parameters:
  • t <Task>

    a task context

private void stopShowingTooltip ( )

Stop showing tooltip


public <Boolean> hideTooltipByPress

Indicates if a shown tooltip has to disappear by pointer pressed event

public <Integer> showTooltipIn

Define interval (in milliseconds) between entering a component and showing a tooltip for the entered component

public <Boolean> syncTooltipPosition

Indicates if tool tip position has to be synchronized with pointer position


menuItemSelected

Fired when a menu item has been selected

        zebkit.ui.events.on("menuItemSelected", function(menu, index, item) {
            ...
        });

Parameters:
  • menu <zebkit.ui.Menu>

    a menu component that triggers the event

  • index <Integer>

    a menu item index that has been selected

  • item <zebkit.ui.Panel>

    a menu item component that has been selected