Please Log-in or Register to get full access to the forums.


Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Floating tooltip get stuck -- interfering with other jQ plugin
14th September, 22:18 (This post was last modified: 14th September 22:30 by neandr.)
Post: #1
Floating tooltip get stuck -- interfering with other jQ plugin
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?
Find all posts by this user
Quote this message in a reply
Yesterday, 22:13
Post: #2
RE: Floating tooltip get stuck -- interfering with other jQ plugin
(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
Find all posts by this user
Quote this message in a reply
Today, 13:34
Post: #3
RE: Floating tooltip get stuck -- interfering with other jQ plugin
Neandr, can you post for full solution so far along with the FullCalendar initialisation please?
Visit this user's website Find all posts by this user
Quote this message in a reply
5th April, 21:30
Post: #4
RE: Floating tooltip get stuck -- interfering with other jQ plugin
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);
						}
                }
            });
Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  [Solved] Floating Tooltips myaudiodna 3 3,163 14th September 21:34
Last Post: neandr
  qTip pointer does not works in the latest jQuery plugin 1.4.1 babupca 1 3,676 11th February 14:17
Last Post: Craig



User(s) browsing this thread: 1 Guest(s)