Snippets code from my daily experience

March 1, 2009

Adding CSS Color Preview Tooltip to Komodo

Filed under: komodo,nsIDOMCSSPrimitiveValue,openkomodo,scintilla,xul — dafi @ 12:36 pm

Do you know Firebug? Uh no? Well please make a jump in twentieth century then return here 😛

Firebug has many great features but I love the color preview tooltip, from CSS Tab moving the mouse over a CSS color expression you will see a little box filled with the color found under the mouse pointer.

Every time I edit CSS (and HTML) files from Komodo subconsciously I move mouse over a color waiting to see the tooltip but nothing happens 😦

I’ve realized a macro can do this job so I’ve written ColorInfoTip that adds to Komodo the ability to show colored tooltip.

Some technical detail

This is a macro! No need to create extensions, the Komodo macro ecosystem is very cool and powerful.

The tooltip is a scintilla Call tip accessible from Komodo API.

The CSS color string can be written using many syntaxes like #RRGGBB or rgb(R,G,B) instead of reinventing the wheel and write the parser I’ve used the getRGBColorValue standard DOM method.

I discovered Scintilla uses BBGGRR color format instead of RRGGBB so the CSSRGBColor components have been converted to be Scintilla compliant.

Known problems

The macro isn’t perfect and any help is welcomed

  • Sometimes the tooltip doesn’t close especially changing editor view
  • Moving mouse quickly doesn’t update the color (fixed)
  • fill here the bug you found


You can download the macro from ColorInfoTip.kpz then open the file from Komodo to install



  1. This post is asking for a name and password of sourceforge.
    Maybe you can delete the link.

    Comment by Tim Luigjes — March 1, 2009 @ 1:19 pm

    • Fixed, thanks. The mediawiki on sourceforge uses https links

      Comment by dafi — March 1, 2009 @ 1:25 pm

  2. […] Adding CSS Color Preview Tooltip to Komodo « Snippets code from my … […]

    Pingback by Adding CSS Color Preview Tooltip to Komodo « Snippets code from my … | Best Web Gallery — March 1, 2009 @ 4:37 pm

  3. Great stuff, thanks!

    Comment by Giorgio Maone — March 1, 2009 @ 6:18 pm

  4. Hey man it’s great 🙂
    Thanks a lot!

    Comment by gozala — March 2, 2009 @ 10:27 am

  5. B-R-I-L-L-I-A-N-T 🙂

    Comment by Vladimir Dzhuvinov — March 5, 2009 @ 8:43 am

  6. Great – very useful! Thank you!

    Comment by Leo-oo- — March 9, 2009 @ 10:07 am

  7. Awesome.

    It takes you just a couple of minutes to edit it and handle the ColorToolTip for other languages. I use it a lot for OpenLaszlo (XML based)

    Comment by alejandro — January 20, 2010 @ 11:13 pm

  8. This is great! I would love if there was any way of implementing an css image preview tooltip, but there doesn’t seem to be much image support in Scintilla tooltips.

    Comment by John — January 25, 2010 @ 7:55 pm

RSS feed for comments on this post.

Create a free website or blog at

%d bloggers like this: