I have a tinymce plugin that populates the editor with content.

Certain populated elements have a class="hoverable"

I'd like to attach a function to the hover event on those elements with class="hoverable"

I know how to attach an onClick with ed.onClick.add in the create function but there is no ed.onHover.add or ed.onMouseIn.add.

Edit: My plug-in actually pops up a dialog when you press the plug-in button in the menu. The user selects some content from the dialog and inserts it into the editor.

I have a tinymce plugin that populates the editor with content.

Certain populated elements have a class="hoverable"

I'd like to attach a function to the hover event on those elements with class="hoverable"

I know how to attach an onClick with ed.onClick.add in the create function but there is no ed.onHover.add or ed.onMouseIn.add.

Edit: My plug-in actually pops up a dialog when you press the plug-in button in the menu. The user selects some content from the dialog and inserts it into the editor.

• javascript
• jquery
• tinymce

2 Answers 2

You can add a mouseover handler to elements in the editor with class 'hoverable'.

$(ed.getBody()).find('.hoverable').hover(function (evt){ /* do tooltip here */   });

You can find a howto create simple tooltips using jQuery here.

In the function that adds the selected content to the editor I added

tinymce.activeEditor.$('.hoverable').live('mouseover mouseout', function(evt) {
    if (evt.type == 'mouseover') {
        //do hover stuff
    }
    else {
        //undo hover stuff
    }
}

In my case new hoverable things may be added so I need the .live in other cases you could probalby just use .hover.