Home/ Questions/Q 4270380
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T07:17:53+00:00

I’m using a implementation of qtip that fires on ‘AllDay’ event-bar mouse-overs. It has

  • 0

I’m using a implementation of qtip that fires on ‘AllDay’ event-bar mouse-overs.

It has a tendency to pop the ‘qtip’ correctly, but than hang and not close/hide the qtip when the mouse has moved outside of the enabled area of the calendar.

You can recreate the problem by quickly moving the mouse in and out of the calendar area div on the http://jsfiddle.net/GxXrW/8/ page.

Do you have any thoughts on force hiding the ‘qtip’- here is my implementation: 

        eventMouseover: function(event, jsEvent, view) {
        clearTimeout(qtipTimeout);

        if (suspendTooltips || $(this).data('qtip')) {
            return;
        }

        $(this).qtip({
            content: {
                text: '...removed...',
                prerender: true
            },
            show: {
                solo: true,
                when: 'mouseover',
                delay: 800, //increased wait-time to not have unwanted qtips fire
                effect: {
                    type: 'slide',
                    length: 285
                }
            },
            hide: {
                effect: {
                    type: ''
                }
            },
            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, //driven from array generated elsewhere
                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);
                }
            }
        });
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your implementation above looks like qTip1 format, but the fiddle you linked to is qTip2, so there’s probably two answers here.

    In the case of the linked qTip2 jsFiddle, the “issue” is due to using unfocus as the hide event (where the user has to explicitly click somewhere else) combined with the solo setting. It’s not really a bug though. What is happening is that the solo:true setting is causing qTips to hide each time you mouseover another calendar day, UNTIL you get to the edges of the calendar — where there are no more qTips to trigger the hide event of any visible tips.

    Changing it to use hide.fixed with a slight delay (to allow the user to mouse into the tip), seems to resolve the issue with that version:

    http://jsfiddle.net/kiddailey/GxXrW/21/

    As for the qTip1 example, I’m not exactly sure why it is doing what you describe. You might want to remove some of the extra qTip features (namely the animation effects and delays) and see if that makes a difference in the behavior. It could simply be the timing between the mouse movement and when events are being triggered causing a problem.

    If you post a working jsFiddle of the qTip1 version I’ll gladly take a second look.

    • 0