Show custom HTML icons in label on hover

Suite and Optimus Suite 5
#1

I am trying to add a capability that on hover I will show extra icons after the node label which can be clicked. E.g.

- Node 1 [E] [D]      <-- hovering of the node should show extra icons
- Node 2

With the code:

var itemText = '';

tree.attachEvent('onMouseIn', function (id) {
    itemText = Tree._tree.getItemText(id);
    tree.setItemText(id,  itemText + '<span class="edit"></span><span class="delete"></span>');
});

tree.attachEvent('onMouseOut', function (id) {
    tree.setItemText(id, itemText);
});

Hovering anywhere on the row triggers a single onMouseIn event, BUT when I go across the span tags I get a mouse OUT followed by a mouse IN which causes flicker. Even if I make the underlying row size big enough to accommodate the added icons.

Is there a best practice to achieve this kind of effect? Essentially having context menu on the hover rather than right click.

Thank you in advance!

#2

Here is a sample for you. I hope it will suite

[code]

dhtmlx_pro_full_test html,body { height: 100%; margin: 0px; overflow: hidden; }
[/code] Instead dhtmlxPopup you can use simple divs and show/hide them manually
#3

Thanks, I will try it. Didn’t know how to access the underlying HTML node for a given item that I hover over.

#4

Here it is. But pay attention that it is not public method.