[Phpmyadmin-devel] qTip usage for more reusable code

[Aris Feryanto]

Hi,

----- Original Message -----

> From: Tyron Madlener <tyronx at gmail.com>
> 
> On Mon, Jul 11, 2011 at 11:34 AM, Aris Feryanto <aris_feryanto at yahoo.com> 
> wrote:
>>  ----- Original Message -----
>> 
>>>  From: Aris Feryanto <aris_feryanto at yahoo.com>
>>> 
>>>  ----- Original Message -----
>>> 
>>>>   From: Tyron Madlener <tyronx at 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.
>> 
>> 
>>  [0] http://demo.phpmyadmin.net/gsoc-aris
>> 
> 
> 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