Avoid to hide while hover the tip

[palaueb]

Hi!

first of all thanks for your efforts coding this great plugin for jquery, you really rocks!

I have a problem that I don't know how to solve, I have a list of LI elements, and when you mouseover a LI a tooltip is shown just a few pixels over the mouse (y:20) but when the tooltip is completely visible the mouse become over the tooltip and the mouseout event is fired. Then it enters a funny (but innecesary for me) bucle of show-hide-show.

Here is my code:

JS Code

$("#llistat a[title]").qtip({
            prerender:true,
            tip: true,
            show: {
               when: {
                  event: "mouseover"
               },
               effect: {
                  type: "fade",
                  length: 500
               }
            },
                hide: {
               when: "mouseout",
               effect: {
                  type: "fade",
                  length: 250
               }
            },
            position: {
               corner: {
                  target: 'topMiddle',
                  tooltip: 'bottomMiddle'
               },
               adjust:{
                  y:20
               }
            },
            style: { 
               name:'dark',
               width: 170,
               height:100,
               border:0,
               padding:5,
               background:'transparent url(/img/globo.png) 0 0 no-repeat'
            }
         });

Hope you can understand my question.

Thanks again!
Marc

[palaueb]

Here is a help image... please, I need to solve this problem for this week.



thanks all

[palaueb]

There is nobody that can help me??

[Craig]

palaueb, sorry for the late reply. Have you tried simply adjusting the tooltips position using the position.adjust.x and position.adjust.y properties?

[ralphholzmann]

Hey palaueb,

I ran into this same problem today. Add this code to the root of your options:

JS Code

hide: false,
    api: {
      onRender: function() {
        var self = this;
        var overTarget = false;
        var overTip = false;
 
        this.elements.target.hover(function(){
          overTarget = true;
        },function(){
          overTarget = false;        
          setTimeout(function() {
            if(!overTarget && !overTip) {
              self .hide();
            }
          }, 100);
        });
 
        this.elements.contentWrapper.hover(function(){
          overTip = true;        
        },function(){        
          overTip = false;        
          setTimeout(function() {
            if(!overTarget && !overTip) {
              self .hide();
            }
          }, 100);
        });
      }
    }

Basically, you define two booleans, one for the target, and one for the tooltip, and initialize them to false. Then you define hover events for both the target and the tooltip. When you mouse over an element, change its corresponding boolean to true. When you mouse out an element, check to see if both booleans are false, if so, hide the tooltip.

I hope this helps / makes sense.

Ralph Holzmann

http://ralphholzmann.com/