Hi,
----- Original Message -----
From: Tyron Madlener tyronx@gmail.com
On Mon, Jul 11, 2011 at 11:34 AM, Aris Feryanto aris_feryanto@yahoo.com wrote:
----- Original Message -----
From: Aris Feryanto aris_feryanto@yahoo.com
----- Original Message -----
From: Tyron Madlener tyronx@gmail.com
Hi Aris
I have reused your Tooltip style (dHint class) and animation
effects
for my sortable tables on the status page. However I had to copy
the
code, maybe it's worth investing time in a reusable solution?
Maybe
based on qtip (or we remove qtip altogether and build our own solution)?
Hi Tyron,
Reusable code is always good. I think we can use qtip, since it is
already
included in phpMyAdmin jQuery library and the interface also looks
nice.
I'll try this on browse-mode tooltip.
I changed the subject of this email to make it clearer.
I pushed new code using qTip to my repo. You may try the demo at [0]. But,
there are some bugs left:
- qTip seems to conflict with column highlighting.
- I use qtip.hide() to hide the qtip when column header is clicked in order
to mark/unmark or to reorder column. But, sometimes it just disappear and never come back again.
I think these problems won't happen in sortable tables on the status
page, since it doesn't need special handling as in browse-mode.
Before I proceed further, I would like to hear any comment or feedback from
other phpMyAdmin developers and GSoC-ers about this qTip usage.
I somehow really liked the style and animation of the old tooltip. It was more aesthetically pleasing ;) Just like the apple site had it.
Maybe we can get qtip tooltips to look that same as well as have this zooming effect on them? Otherwise I would suggest to remove qtip from pma and build our own solution, since pma doesn't need the feature richness of qtip, I think.
And it should probably still follow the mouse cursor, and not point to the corner of the column. So altogether maybe we then define a function PMA_createqTip() in functions.js that applies some default options to qtip. Something like this:
function PMA_createqTip(element, options) { var o = { position: { target: 'mouse' }, style: { border: { width: 1, radius: 5, }, } }
$(element).qtip($.extend(o, options)); }
I pushed code for the new tooltip. I used Tyron's suggestion to create a function PMA_createqTip() and added one parameter, "content" *. It looks very similar to the old tooltip, except for some behavior, like the tooltip sometimes not update its position while in the animation phase.
Please check the demo at http://demo.phpmyadmin.net/gsoc-aris.
* Actually, "content" can be specified inside "options" parameter, but I think it is used often and specifying it inside "options" may require people to understand about jQuery qTip's options. Thus, I separated it as a parameter.
-- Aris Feryanto