PDA

View Full Version : "Plain CSS tooltips" instead of Ext.tip.QuickTip?



lsaffre
29 Feb 2012, 3:14 AM
One of my users would like me to use "plain CSS tooltips" as explained by Alexander Dawson <http://sixrevisions.com/css/css-only-tooltips/> instead of Ext.tip.QuickTip.

But I didn't yet get them to work in an ExtJS application because they interfere with ExtJS's usage of CSS rules. Seems that the overflow and z-index properties conflict.

Is there somebody here who got them running under ExtJS?
Or general opinions about this idea?

Luc

mitchellsimoens
29 Feb 2012, 7:31 AM
Why not just style the QuickTip to look like that?

lsaffre
6 Mar 2012, 1:20 PM
Thanks, Mitchell, and sorry for my slow reaction.

Yes, that sounds like the right way to go. I tried it, either by adding my own class to all QuickTips (using the "cls" config option when registering the quicktip), or by overriding CSS rules for the ExtJS classes of the many DIVs that build up a QuickTip. Here are some of them:

.x-tip
.x-tip-tl
.x-tip-tr
.x-tip-tc
.x-tip-header
.x-tip-header-text
.x-tip-bwrap
.x-tip-ml
.x-tip-mr
.x-tip-mc
.x-tip-body


And I must say that I gave it up! ExtJS uses so subtle CSS tricks I can only admire but never understand! (I'll should maybe add that I am more a Python than a web designer.)

Or can somebody give simple instructions for changing (1) background color to yellow and (2) increase padding between text and border?

burnnat
7 Mar 2012, 5:58 AM
If you use SASS, you should be able to modify the values of the $tip-body-color and $tip-body-padding variables to get what you need. In pure CSS, though, it's probably much harder to do.

lsaffre
8 Mar 2012, 1:51 AM
Thanks for the hint. No, I didn't yet use SASS but will start by reading
(http://www.sencha.com/learn/theming/)http://www.sencha.com/learn/theming/

Luc