I am using Prototype and Scriptaculous to make my website as easy to use as possible. I also found some random code on the web to do tooltips – it almost worked! Applying tooltips to Scriptaculous Sortable elements leads to many problems, and I have just finished largely rewriting the library.
After moving some sortable elements the tooltips of the moved elements would be displayed underneath the unmoved elements. This is because of the way z-index stacking contexts are created in browsers. In moving an element, Scriptacolous clones it and moves the clone, inserting a new element when the element is dropped. This causes the dropped item to be in a different z-index stacking context than the other items. To get around this, the tooltips need to be drawn outside the moved elements context. This can be done by cloning the tooltip and then inserting it into the document at a point outside the sortable elements’ container. I have explicitly put in the id’s to which the tooltips is being attached, they should probably be passed in (left as an exercise for the reader).
When the tooltip needs to be hidden, just destroy the clone:
This also means the tooltip needs to be positioned absolutely, so ensure you are using absolute screen x & y coordinates.
Dragging a sortable element over other elements results in a number of mouse events firing as the elements are redrawn. Many of these events are consumed by Scriptaculous and not passed on. Thus, the tooltips hide and show functions may be called in any order, resulting in spurious and permanent copies (since it is cloned) of the tooltip all over the screen. To get around this just ensure there is only ever once tooltip on the screen at a time, so at the top of the show method put