CSS Color Preview Tooltip

Posted by dafi on 2009-03-06 01:08

I've written a macro working similar to Firebug color preview tooltip feature.

Inside CSS and HTML files if user moves mouse pointer over a color it shows the preview tooltip.

The macro can be downloaded from ColorInfoTip.kpz

More details on my blog

Enjoy the Komodo experience

Enhance KomodoEdit with MoreKomodo

garakkio | Fri, 2009-03-06 01:38

You rock, dude! :-)

jeff.griffiths | Fri, 2009-03-06 10:03

I've been using this for a couple of days, it's pretty awesome. +1 for integrating this into MoreKomodo =).


dafi | Fri, 2009-03-06 10:30

I don't think MoreKomodo is the right place, I'm working to a CSS (HTML) dedicated extension.

I've dozen of macros not well integrated, I would to try to make them more complete.

But I admit adding CSSToolTip to MoreKomodo should be very easy and fast :D

Enhance KomodoEdit with MoreKomodo

ActiveState Staff
Fri, 2009-03-06 12:50

Hi Dafi,

I nice little feature, though the Komodo team have been working on a similar feature (hyperlinks), see:

Komodo hyperlinks trigger through the Ctrl (or Cmd) key and will dynamically highlight/interact with interesting points in the Komodo editor.

You can see the source code in the following directories:


dafi | Sat, 2009-03-07 00:28

Hi Todd,

The Hyperlinks feature is amazing but I prefer to write code compatible with Komodo 4.4.x (I use a licensed IDE version at office) and Komodo Edit.

If I understand correctly the CSS color preview will be implemented only on IDE version.

Only for my personal taste, I like to see CSS preview only moving cursor without pressing any key (CTRL or CMD).

I want to use Hyperlinks to open file names under cursor.
I've already written an extension doing that but user must use it from context menu, a very annoying behavior.

It will be very natural using Hyperlinks:

1. hold down CTRL
2. the path is highlighted
3. click to open file

If you are implementing a similar feature please tell me so I stop my not necessary work :D :D

Enhance KomodoEdit with MoreKomodo

ActiveState Staff
Wed, 2009-03-11 17:00

Yes, we initially had the CSS color preview/picker as an IDE only feature, but it was since decided to move this into Komodo Edit as well.

We also have a regex handler class that we use to match against "http://" hyperlinks in the Komodo editor and have these links be opened in the browser when clicking on them.

I'd imagine the file handling your thinking of could easily be added as a custom hyperlink handler, likely utilizing the regex handler base (like the css color preview and http handler are doing).

I have also thought about this file-opening behaviour (though as yet there is no work done on this feature), which would also be useful when editing a web page, you could easily click on the href links to have them open in your browser, preview the image src, click on a css href to edit the css file, etc... lots of possibilities here. Note: I've since logged an enhancement request on this feature here:

Our plan is to eventually provide a hyperlinks preferences UI where the user can add their own custom regex pattern that will perform a specified action (open in browser, open in editor, etc...), which will make regex hyperlinks easy to manage.