Tridion GUI Extension for Mouse Hover

Question

I have a GUI Extension to add a new item in Context menu, which is fine. Now, when i mouse hover on the newly added context menu, i want to do something (say for example wanted to loop through the "User Group" and list the "User Group" during mouse hover.

When the list displayed during mouse hover, i want to select any "User Group" and i want to do something after selecting the "User Group".

Could anyone please help me on this? i can create extension and do the stuffs what ever i required after selecting the listed items during mouse hover. But I have no idea, how to call a method/script when i mouse hover the context menu? And no idea, how to call a method/script/page when i select from the list during mouse hover.

Thanks, Jey

Answer 1

Your best bet is to use a custom page and load it in an overlay on hover. You want the overlay to remain available while people are making their selection so the overlay would have to be explicitly closed.

In the custom page in the overlay you can do anything you want.

Note that I personally seriously question the usability aspects of such a solution as throwing nasty overlays on hover is usually a bad idea and not a very touch-device compatible one.

Have you asked why just clicking on the menu item isn't good enough? That does seem to be the 'industry standard' for how menus are supposed to work...

Answer 2

There is no built-in way to hook into the hover event. It's not entirely clear to me why you want to do something on hover, but I assume you might be looking at adding sub-menu items to the list dynamically?

I don't believe there is an easy way to do that. Usually what people do is open up a new dialog if there are more choices for the user to do after choosing an option.

Answer 3

If you are adding a button control, in your extension js you can add something like:

asp.YourButton = $controls.getControl($("#YourButton"), "Tridion.Controls.Button");
$evt.addEventHandler(asp.YourButton, "mouseover", this.getDelegate(this._onButtonMouseover));

YourExtension.prototype._onButtonMouseover = function () {
    YOUR CODE
};

With the mouseover event handler you can trigger some function.