craigsworks.com - Support Forum - qTip with ready: true appears and then slides into place

Today I used qTip to build a simple speech bubble for showing welcome instructions. When the page loads, the bubble is supposed to appear above a certain button to give the user a cue.

It works great, except that it actually appears on top of the button and then slides up into place. What I really want is for it to just fade in.

I tried all sorts of different effects in .show, and they apply when the qTip first appears (out of place) and then it slides up into place. Actually, the effects are applied, they're just happening while the qTip is still out of place. And then it slides up to where it should have appeared.

If I remove/change the values in .show so that this box has normal tooltip-style behavior instead of my appear-on-load behavior, on mouse hover it appears in the right place and looks great.

This behavior appeared in IE8 as well as Firefox.

I've put a bunch of time into this and I'm stumped... I'm probably missing something obvious. Any thoughts?

Here's the code, which is ripped and modified from one of the demos:

JS Code

$(document).ready(function() {
 
    $('#ctl00_ContentBody_ButtonSearch').qtip(
                       {
                           content: {
                               title: { text: 'Getting Started', button: 'Close' },
                               url: 'WelcomeQtipControl/WelcomeContent.htm'
                           },
                           style: {
                               name: 'light',
                               width: 450,
                               padding: '14px',
                               tip: 'bottomMiddle',
                               border: { width: 3, radius: 8, color: '#000000' }
                           },
 
                           position: {
                               corner: { target: 'topMiddle', tooltip: 'bottomMiddle' }
                           },
 
                           show: { when: false, ready: true },
                           hide: false
                       });
});

brianm, trry sticking a this.updatePosition() in the beforeShow callback:

JS Code

$('#ctl00_ContentBody_ButtonSearch').qtip(
                       {
                           content: {
                               title: { text: 'Getting Started', button: 'Close' },
                               url: 'WelcomeQtipControl/WelcomeContent.htm'
                           },
                           style: {
                               name: 'light',
                               width: 450,
                               padding: '14px',
                               tip: 'bottomMiddle',
                               border: { width: 3, radius: 8, color: '#000000' }
                           },
 
                           position: {
                               corner: { target: 'topMiddle', tooltip: 'bottomMiddle' }
                           },
 
                           show: { when: false, ready: true },
                           hide: false,
                           api: {
                              beforeShow: function(){ this.updatePosition() }
                           }
                       });

You'll be glad to know this is fixed in the latest branch release and subsequently the 1.0 release when it's out.

Hi Craig,

Thanks a lot for the help... But it's still doing the same thing.

Maybe I will just look into pulling down the latest branch release, if that's an option.

I tried pulling down the latest branch release (311) but with that one the qTip didn't appear at all. Smile

I included jquery.qtip.min.js, and when that didn't work I also included jquery.qtip.tips.min.js ... Seems like I'm missing something about how the branch release works.

I think I get it -- I would need to pull down all the files and reference them seperately. Looks like you've broken the single file up to make development easier and then you recombine it back together when it's time for a release.

I think I will just wait for version 1. Wink

Thanks!

(27th January 01:29)Craig Wrote: [ -> ]brianm, trry sticking a this.updatePosition() in the beforeShow callback:

JS Code

$('#ctl00_ContentBody_ButtonSearch').qtip(
                       {
                           content: {
                               title: { text: 'Getting Started', button: 'Close' },
                               url: 'WelcomeQtipControl/WelcomeContent.htm'
                           },
                           style: {
                               name: 'light',
                               width: 450,
                               padding: '14px',
                               tip: 'bottomMiddle',
                               border: { width: 3, radius: 8, color: '#000000' }
                           },
 
                           position: {
                               corner: { target: 'topMiddle', tooltip: 'bottomMiddle' }
                           },
 
                           show: { when: false, ready: true },
                           hide: false,
                           api: {
                              beforeShow: function(){ this.updatePosition() }
                           }
                       });

You'll be glad to know this is fixed in the latest branch release and subsequently the 1.0 release when it's out.

Hi Craig,

I was basically trying to do the same thing and I downloaded branch rev 34 today and the tip doesn't display until I scroll down the page (FF & Chrome), or move the mouse in IE. Either way it will fly down from the top and left to the spot on my page that it is tipped to. Very weird!

Are static tips really possible with qtips at this point?

Hello,

I solved this bug with a little trick since I can't manage to use the newest branches version.

Here is my code :

JS Code

qTipInitParam.show = {
		ready: true, 
		effect: {
			type: function() {
				var self = this
 
				if (self.data('ready')) {
					self.show()
					return
				}
 
				self
					.css('visibility','hidden')
					.data('ready',1)
				setTimeout(function(){self.show('fast', function(){self.css('visibility','visible')})}, 500)
			}
		}
	}

Setting qTipInitParam.show.effect to a function replaces the default simple show by mine.
My function is very simple, at the first call I hide the tooltip with visibility css attribute and then, with a small setTimeout, I wait to the end of the glitch to reset the visibility attribute.

After the first call it will simply shows the qtip.
Using data jquery function, the flag 'ready' is set on the tooltip DOM element, allowing to make this trick work on several elements.

I had a similar problem, not sure if its exactly the same because it had nothing to do with ready:true, but it has the same symptoms so I thought I'd post here in case anyone else stumbles on it like I did.

The problem was with the content.url, the content from the url has a different width than what was defined in the style (no definition so 0px width, I assume), so once the content loads the tooltip has to recalculate values like topMiddle and slides accordingly. The solution for me was, since my content has a fixed width of 200px, telling qtip to expect that by setting style.width=200.

FWIW, this behavior still exists in 1.0.0-rc3

HTH,

-B

craigsworks.com - Support Forum

brianm

Craig

brianm

brianm

brianm

breadtruck

Léo

bkputnam