TinyMCE and Tooltips

I don’t know how many of you out there are using TinyMCE and a script called wz_tooltip in conjunction on your Web site. However, for those of you that are doing just that, you might have come across one very frustrating issue: TinyMCE won’t load in Internet Explorer.

After banging my head against the wall for hours and hours trying to figure out why TinyMCE would not load properly on certain pages when viewed in Internet Explorer (6 or 7), I finally found the solution.

I started by disabling other javascript in the pages and testing it.

I discovered that TinyMCE consistently worked when I had the javascript call to wz_tooltip commented out. I then went Googling for “tinymce wz_tooltip” and came across an article describing my problem. Unfortunately, his fix didn’t work for me. If I commented out the lines he described (which, in my version of wz_tooltip, were nowhere near lines 397-400), IE started throwing a fit about security issues and told me it wouldn’t let me load the page. The exact complaint was “Internet Explorer cannot open the Internet site http://www.example.com/. Operation aborted” (where http://www.example.com/ should be replaced with the actual location of the page I was trying to load).

I then started thinking about when I had seen that security error in IE before. It then occurred to me that Internet Explorer throws that kind of fit when you try to alter a DOM element that hasn’t been completely loaded yet (for instance, if you try to add a child element to the “body” from within the “body” of your page).

So, I put the wz_tooltip.js back to the way it was before I made the changes mentioned above, and then simply moved my call to it. As long as you load the wz_tooltip.js after your WYSIWYG elements, everything seems to load just fine in all browsers.

Therefore, the solution to this problem is to place the javascript include statement at the bottom of your page, just before the closing body tag, rather than placing it just below the opening body tag as the documentation tells you to do.

I hope that helps some other people. For those of you that have not used wz_tooltip, you might want to check it out, as it’s a handy little tool to have in your development arsenal. For those of you that have not used TinyMCE, you absolutely must check it out, as it is probably the greatest and most universally recognized WYSIWYG editor available on the Web, today.

7 Responses

  • Allen

    i think the tiny mce implementation in wordpress is better than the one in drupal. it seems to load better and smoother.

  • I have only used drupal once or twice, so I can’t really comment on its implementation of TinyMCE.

    WordPress has a very nice implementation of TinyMCE, but that’s because they’ve pretty much pared it down to the minimum. They have only included the most popular, widely used formatting options and left out things like tables, subscript, superscript, cut, copy, etc. I haven’t looked under the hood, but I’d guess that they’ve probably implemented the PHP acceleration available for TinyMCE, too.

    TinyMCE is amazingly diverse and allows an insane amount of customization. The only issue is, the more features you add to TinyMCE, the longer it takes to load. It really becomes an issue when you try to load a TinyMCE textarea in Internet Explorer.

  • Akira

    I had a variety of problems implementing wz_tooltip in IE. It turned out not to have anything to do with TinyMCE. The problem was that my page contained some DOM errors and wasn’t passing the W3C validator. Try getting your page through the W3C validator first and see if that doesn’t fix your problem.

  • Pavel

    Can you actually create a wz_tooltip in TinyMCE itself? I’ve spent hours looking for a tooltip tool to use in TinyMCE and the only thing I’ve found so far was an old TinyMCE plugin that doesn’t work with new versions. Any suggestions will be appreciated.

  • PVTM

    @Pavel….same thing around here…..let’s hope that the guyz who developed TinyMCE will make that plugin….
    if you manage to find something, please post here…thanks!

  • Cristiane

    Thank you very much, I had same issue and was getting crazy to resolve it. A very simple change resolved my issues!!!!

  • Hi I was doing a search on google and found your blog, I’m trying to use a script for cute tooltips on my blog and it works fine on my blog but I can’t get it to work on my header and that’s where I need it to work! I was wondering if you could take a look at it and help me? thanks.