qTip Development trunk usage?

[pwnedd]

Hello,

I've been recently experimenting with the latest nightly build from bzr (r259 at the time of writing), and it looks like the architecture and interface for qTip has been completely reworked such that code which worked in 1.0rc3 no longer works.

Are there any examples or documentation for the development branch? Specifically, it looks like in the later versions of qTip, style-related settings are now stored in CSS files and loaded by specifying a class name in the qTip constructor. Is that correct?

Any help would be appreciated. In the meantime I'll keep reading over the code.

Thanks!
Keith

[pwnedd]

Hi Craig,

Thanks for the quick response and clarification. I think I've got it mostly figured out now, but just to clarify a few things:

1. "options.position.type" is no longer included, right? Should this now be controlled directly in CSS?

2. The metadata plugin is optional and simply provides support for specifying settings directly in the HTML attributes for a given element?

3. Has the method for creating tooltips which use an element's "title" attribute changed? For example, when I try to do something like "$('elem').qtip()" where the content is not manually specified, it complains "opts.content is undefined".

4. Finally, it looks like there may be a small bug in jquery.qtip.tips.js:72

The variable "corner" is declared as a global instead of local variable, which in strict mode causes the application to halt ("assignment to undeclared variable corner"). Adding a 'var' in front of the variable declaration fixes the problem.

In case anyone else is curious, here is an example of one of the tooltips I'm creating which don't use the title attribute contents:

JS Code

// qTip nightly (r259)
        this.container.qtip({
 
            position: {
                //type: 'static',
                container: this.container,
                target: 'bottomRight',
                corner: 'topLeft'
            },
            show: { when: { event: 'click' } },
            hide: { when: { event: 'click' } },                        
            content: {
                title: {
                    text: this.type,
                    button: "x"
                },
                text : content
            },
            style: "ui-tooltip-light"
        });

...And the syntax that I used to use with 1.0.0 rc3:

JS Code

// qTip 1.0.0 rc3
        this.container.qtip({
 
            position: {
                type: 'static',
                container: this.container
            },
            show: { when: { event: 'click' } },
            hide: { when: { event: 'click' } },                        
            content: {
                title: {
                    text: this.type,
                    button: "x"
                },
                text : content
            },
            style: {
                textAlign: 'left',
                width: 250,
                padding: 8,
                button: {
                    "color": "#FFF"
                },
                title: {
                    "background-color": "#909A99"
                },
                tip: 'topLeft',
                border: {
                    width: 1,
                    radius: 6,
                    color: '#6e6e6e'
                }
            }
        });

Thanks for your help Craig. Keep up the good work!

Best,
Keith

[Craig]

No problem Keith. Regarding the questions:

1. "options.position.type" is indeed controlled via CSS now. IF you need another positioning type, specify it in the CSS.

2. The metadata plugin is indeed optional. More information on how to use it can be found on the jQuery documentation site. qTip simply utilises where needed.

3. This is a bit up in the air at the moment in terms of implementation. Currently the tooltip adds and removes of the title attribute on show/hide to allow it to be more easily used along with other plugins such as UI Tabs. At the moment the library doesn't automatically use the title attribute, but will do very soon by setting content.text to true.

4. Just pushed a fix upstream for this issue. Thanks for that.

Also, looking over your code there's some slight syntax issues. Here's the corrected version:

JS Code

// qTip nightly (r259)
        this.container.qtip({
 
            position: {
                //type: 'static',
                container: this.container,
                corner: {
                    target: 'bottomRight',
                    tooltip: 'topLeft'
                }
            },
            show: 'click'
            hide: 'click',                        
            content: {
                title: {
                    text: this.type,
                    button: "x"
                },
                text : content
            },
            style: "ui-tooltip-light"
        });

[pwnedd]

Thanks for the corrections. Things are working pretty well now with jQuery 1.4a2. My next couple of questions relate again to styling the tooltips:

1. Is there any better way to control the look and feel for the title bar and close button without using CSS descendant selectors? For example, so far this is the most straight-forward way
I've found to get from the old-style to new-style:

JS Code

// Before
        $.fn.qtip.styles.myStyle = {
                textAlign: 'left',
                width: 250,
                padding: 8,
                button: {
                    "color": "#FFF"
                },
                title: {
                    "background-color": "#909A99"
                },
                tip: 'topLeft',
                border: {
                    width: 1,
                    radius: 6,
                    color: '#6e6e6e'
                }    
        };

JS Code

// After
.qtip-myStyle {
    position: static;
    text-align: 'left';
    width: 250px;
    padding: 8px;
    color: #FFF;
    border: 1px solid #6e6e6e;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}
 
.qtip-myStyle .ui-tooltip-titlebar {
    background-color: #909A99;
}
 
.qtip-myStyle .ui-tooltip-close {
    color: #FFF;
}

2. Is it possible to "turn off" jquery UI support for the tooltips and use the original qTip style? (e.g. http://craigsworks.com/projects/qtip_new...le%20tips)

Thanks,

Keith

[Craig]

That's about as straightforward a style as you're going to get unfortunately Keith. Regarding question two, I'm not entirely sure I understand the question? Which "original qTip style" are you referring to? The Cream style?

P.S. I didn't realise the new site was known to anyone else! How did you come across it and see nas you've seen it now, what do you think?

[pwnedd]

Hmm. I'm not really sure how I ended up on the new version of the site. I must have gotten to it through a link from either the forums or Launchpad.

Few quick thoughts:

1. Homepage
[list=*]
[*]* Having a screenshot of qTip in action is always nice.[/*]
[/list]

2. Features
[list=*]
[*]* Increase contrast for selection section a bit? It's difficult to see against background on my monitor.[/*]
[*]* When clicking through the different sections a number of times, tooltips will sometimes initially show up in the wrong place (top-left corner). Resizing the window causes them to be immediately repositioned to the correct location. (Tested FF 3.7 nightly)[/*]
[*]* For longer sections, a vertical scrollbar is displayed which isn't too bad in itself, however, some of the content gets shifted slightly to the left as a result. It becomes very visible if you simply click down the list of features: the main content box will move to the left and back a few times.[/*]
[/list]

3. Demos
[list=*]
[*]* Include specific screenshots or graphics for each item?[/*]
[/list]

4. Downloads
[list=*]
[*]* Include a link to the project's Launchpad homepage (right now there is only a link to the code browsing)[/*]
[/list]

Overall it looks really nice!

Quote:Regarding question two, I'm not entirely sure I understand the question? Which "original qTip style" are you referring to? The Cream style?

Yep, the Cream style. For the application I plan to use qTip in, I do use UI for many of the components, however, for the tooltips having something simple like the Cream-style cartoon bubbles may be more useful. The new version (1.1x?) seems to apply ui-widget, etc. classes which results in the tooltips looking very similar to the UI dialogs.

Any suggestions?

Thanks,

Keith

[Craig]

pwnedd, the easiest way to accomplish this is to simply make the CSS styles of the default tooltip more specific so that it's attributes take precedance over the jQuery UI styles. For example ,adding 'div' before the selectors:

JS Code

/* Default tooltip style */
div.ui-tooltip-wrapper{
   border-color: #F9E98E;
   background-color: #FBF7AA;
   color: #A27D35;
}
 
   div.ui-tooltip .ui-tooltip-titlebar{
      background-color: #F0DE7D;
      color: #A27D35;
   }
 
   div.ui-tooltip .ui-tooltip-close .ui-icon{
      background: #A27D35 url('images/close.png') no-repeat 50% 50%;
   }

And thanks for the comments, good to get feedback on it!