IE Hates it When You Move Things

Recently I needed to implement styled tooltips that would follow the user’s mouse. Being lazy, I googled for a while and found a nice little library for Prototype (tooltip.js) that did almost exactly what I wanted. With a little modification the tooltips would follow the mouse around instead of positioning only when they were first triggered. Nice.

But the site I was working on was extremely complex, with positioned elements all over the place. The tooltips lost track of where they were in the page and ended up positioning themselves somewhere else on the page. They still followed the mouse, though. It was actually rather amusing. But not what I wanted. If only the tooltip elements were under <body> instead of ... somewhere else.

So back to google. I found another library for Prototype (move and copy) that made it easy to reposition elements. Then it was just a matter of triggering the move when I wrote out each element and it would be in the right position on the page. Worked like a charm. Or so I thought.

Not long after, I decided to add these cool tooltips to another project. That one had IE as a high priority, so I did more testing in that browser than in the first project (which was mainly intended for FireFox and Safari users). That’s when I discovered that IE REALLY hates it when JavaScript tries to move an element into the body tag. So much so that if the JavaScript in question isn’t in <body> or <head> the entire page will fail to load. Ugh. The solution was simple, just put the JavaScript where IE wants it to be (which, to be honest is the proper place to put it in any case). Still annoying, though.

to blog