qTips with jQuery UI CSS and ThemeRoller

[dfeeney]

I spent some time last evening coming up with a style that is compatible with the jQuery UI CSS framework. I think what I came up with is a good starting point. I hope someone finds this useful.

JS Code

$.fn.qtip.styles.themeroller = {
        background: null,
        color: null,
           tip: {
               corner: true,
               background: null
 
           },
           border: {
               width: 5,
               radius: 3
           },
           title: {
               'background': null,
               'fontWeight': null
           },
           classes: {
               tooltip: 'ui-widget',
               tip: 'ui-widget',
               title: 'ui-widget-header',
               content: 'ui-widget-content'
           }
       };

Thanks,
David

[tipolosco]

dfeeney Wrote:I spent some time last evening coming up with a style that is compatible with the jQuery UI CSS framework. I think what I came up with is a good starting point. I hope someone finds this useful.

JS Code

$.fn.qtip.styles.themeroller = {
        background: null,
        color: null,
           tip: {
               corner: true,
               background: null
 
           },
           border: {
               width: 5,
               radius: 3
           },
           title: {
               'background': null,
               'fontWeight': null
           },
           classes: {
               tooltip: 'ui-widget',
               tip: 'ui-widget',
               title: 'ui-widget-header',
               content: 'ui-widget-content'
           }
       };

Thanks,
David

No works in ie7.

thanks, Giuseppe

[dfeeney]

tipolosco Wrote:

dfeeney Wrote:...

No works in ie7.

thanks, Giuseppe

Thanks for catching that, Giuseppe. I had used 'null' values to force $.extend to unset certain values, but of course this performs differently in IE. I've been able to work around it by doing the following instead:

JS Code

$.fn.qtip.styles['defaults'].background=undefined;
$.fn.qtip.styles['defaults'].color=undefined;
$.fn.qtip.styles['defaults'].tip.background=undefined;
$.fn.qtip.styles['defaults'].title.background=undefined;
$.fn.qtip.styles['defaults'].title.fontWeight = undefined;
 
$.fn.qtip.styles.themeroller = {
   border: {
       width: 5,
       radius: 3
   },
   classes: {
       tooltip: 'ui-widget',
       tip: 'ui-widget',
       title: 'ui-widget-header',
       content: 'ui-widget-content'
   },
   width: {
       min:"300",
       max:"1000"
   }
};

This is a bit unsavory, but it works in IE 6&7. I found that I had to set a minimum width or the tooltip would be abruptly truncated with no border, but I think this may be a more general issue.


David

[tipolosco]

works!! Good jobs!

Thanks so much!!


I added qtip in my jsf component library! qTip is the best tooltip based on open source jQuery plugin!