For various architectural and historical reasons that I wont go into here, one web application that I work on (lets call it Qwappy) is built using frames. (I have previously entertained the idea of replacing the framed website with a fancy div version, but gave up after about 5 minutes after realising that the cost of the change would way exceed any potential benefits). It is pretty much the standard layout - banner at the top, treeview menu down the left, and main content forming the bulk - with a few extra frames included for fun.
The problem (well, one of them anyway) I have with this design became evident the other day when I was playing with the content of the menu tooltips. Hovering over an item in the treeview menu will bring up further details such as a price, an id, a fancy description, etc. It seems that every version of every browser renders the tooltips differently - from displaying multilines to wrapping or truncating the text. It is obviously not this extreme, but its close enough to make tooltips worthless for anything slightly more complex than a simple 2-3 word message. This is when I looked to the client framework for help.
Qwappy uses mootools for it's client-side framework (as an aside, check out this nifty and slightly outdated speed tester). I believe that mootools is a nice elegant framework, but these days I generally prefer an alternative framework that is natively supported by a well known IDE :-) So, solution fixed. Simply integrate the tips effect provided in the mootools more collection, and voila.
But no, that's where the real problems start. The menu frame is too small to contain the tooltip div, and being a div constrained by that particular frame, it wont cross over to the next frame so keeps dissappearing off to the left of the window.
Part 2 explores how I managed to fix this so that the tooltip acts as though there are no frames on the page...
Posts
