Floating tooltip get stuck -- interfering with other jQ plugin

[neandr]

As described with other thread using qTip I have successfully defined a tooltip which follows the mouse pointer while hovering the 'element'.
All this is used with qQ plugin "fullCalendar". The element in question not only has the tooltip tied to it, but also some other event(s) for the fullCalendar. It seems the events interfere in the following way (describing the steps and effects):
1. hover over the element --> tooltip opens and follows as long over the element: OK!
2. fullCalendar has events to change the element:

• (mousedown) at some point on the element to resize the element --> element gets resized
• (mousedown) at some point on the element to reposition the element --> element gets repositioned
  -- With both those actions the tooltip follows the action (resize/reposition).
  -- With releasing the mouse there are two effects:
  

OK: pointer is moved out of the element --> tooltip closes --> release the mouse
NOK: pointer is on the element (tooltip still open) and the mouse is released --> tooltip gets stucked on the screen, no change to close.

It seems the hide: { when: 'inactive', delay: 1000 } will solve the problem.

Any other suggestion here?
Günter

PS/EDIT: The tooltip -- with that example -- closes after 1 sec (or any other time) ALSO when the pointer remains on the element. Is there a setup that:
- hold the tooltip open as long as the pointer is visiting the element
AND
- closes after leaving the element after a given time?

[neandr]

(14th September 22:18)neandr Wrote:  PS/EDIT: The tooltip -- with that example -- closes after 1 sec (or any other time) ALSO when the pointer remains on the element. Is there a setup that:
- hold the tooltip open as long as the pointer is visiting the element
AND
- closes after leaving the element after a given time?

Hehe, that's a very tricky package, a lot of tunable settings .. here is a setup which "nearly" does what I expect:

JS Code

position: {
             target: 'mouse',
             adjust: { screen: true }
         },
         show: { 
            delay: 1000, solo: true 
         },
         hide: { 
            when: 'mouseout', delay: 500 
         },
         border: {
            radius: 4, width: 3 },
         style: {
            width: {max:500}, name: 'green',
         }

-- it follows the mouse movement
-- it doesn't open the tooltip when moving the cursor over&off the elements, this prevents blicking tooltips the user would see when moving the cursor cross the calendar
-- it closes the tooltip after leaving the element
and !!!
-- it solves the 'stucking' of the tooltips because of solo:true, fact is: the stucking is there as before, but with moving the cursor back to the element or over another that stucked tooltip will be closed.
Q: is there another / additional method/event/anything else which definitely prevents the stucking?

All that takes place with this <a> element:

JS Code

<div style="position: absolute; z-index: 8; top: 0px; 
		left: 244px; width: 167.1px; height: 39px;" 
		class="fc-event fc-event-vert fc-corner-top fc-corner-bottom  ui-draggable ui-resizable">
	<a>	
		<span class="fc-event-bg"></span>
		<span class="fc-event-time">00:00</span>
		<span class="fc-event-title">R abholen</span>
	</a>
	<div class="ui-resizable-handle ui-resizable-s" unselectable="on" 
		style="-moz-user-select: none;">=</div>
</div>

The tooltip is tied to the <a> element.

Is there a possibility to close the tooltip with activating class="fc-event-time" or class="ui-resizable-handle ui-resizable-s".
But I need a definition for both situations, a real OR condition here.

Günter

[Craig]

Neandr, can you post for full solution so far along with the FullCalendar initialisation please?

[jordan@bracketlabs.com]

Has anyone had any progress on this?

We're having qTips that 'hang' so to speak and don't hide themselves after the user has moved outside of the event-bar.

We have to attach the qTips like so:

PHP Code

eventMouseover: function(event, jsEvent, view) {
            clearTimeout(qtipTimeout);
 
            if (suspendTooltips || $(this).data('qtip')) {
                return;
            }
 
            $(this).qtip({
                content: {
                    text: ' /.../ removed to be concise /.../ ',
                    prerender: true
                },
                show: {
					delay: 1000,
                    solo: true
                },
                hide: {
					delay: 500,
					when: 'mouseout'
                },
                position: {
                    target: 'mouse',
                    adjust: {
                        x: 10,
                        y: 4,
                        mouse: true,
                        screen: true,
                        scroll: false,
                        resize: false
                    },
                    corner: {
                        target: 'bottomLeft',
                        tooltip: 'topLeft'
                    }
                },
                style: {
                    tip: 'topLeft',
                    padding: 10,
                    background: event.bgColor,
                    color: event.fgColor,
                    border: {
                        width: 2,
                        radius: 7,
                        color: event.bdrColor
                    },
                    width: 365
                },
                api: {		
						onRender: function() {
							var self = this;
							qtipTimeout = setTimeout(function() {
								self.show();
							}, 450);
						},
						beforeShow: function() {
							return (!suspendTooltips);
						}
                }
            });