JQuery UI ToolTip - leaving artefacts when elements are clicked 1

[1DMF]

Hi,

I seem unable to work out why JQuery is constantly leaving tooltip artefacts all over the places when ever an element is clicked?

For example I have an anchor with the mailto protocol and a title which was JQ ToolTipped via

$(document).ready(function(){      	 
    
    // add tooltip
    $('body').tooltip({track:true});         
            	      
});

When the anchor is clicked outlook opens as expected, but when you close the email page and go back to the webpage the tooltip is still lurking around on the screen and won't go away unless you click it?

Why is this happening and how do I stop it?

Thanks,
1DMF



"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[1DMF]

Thanks Justin,

Found this worked for me...

adjust: {
          x:10,
          y:20   
      }

I think because I still had

adjust: {
    mouse:true,
    scroll: true
}

Left over from Qtip V1, when I included x/y offset it made no difference.

I'll have another go tomorrow, but I'm sure that's the problem, as your JS fiddle, and my extra offset fiddling produced what I was looking for.

Appreciated, 1DMF.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[1DMF]

no, just realised my schoolboy error...

position: {
                target: 'mouse',
                my:'bottom left',
                at:'bottom left' 
            },
        adjust: {
                 mouse:true,
                 resize: true,
                 scroll: true
                 }

adjust is a sub-set of position!

1DMF <-- flipping idiot!

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[jpadie]

yes - you need to remove the mouse:true line as that tells qtip2 to follow the mouse (to the pixel). to make the element clickable you need to create an offset of at least a pixel. otherwise the click is registered on the qtip and event bubbling is stopped so it never gets to the underlying element.

leaving scroll:true should not make any substantive difference. unless i have misunderstood its point.

making the offsets 10 each will work equally. but provided the offset is a pixel than that's sufficient. the more the offset then the more it will look curious. e.g. you could leave the y:0 and put the x between 2 and 5 depending on what cursor you are using (to avoid overlap with the hand, for example).

 

[1DMF]

Thanks Justin,

As I thought it as me getting the syntax wrong for adjust and not including it as a subset of position, which is why I couldn't get my offset to work.

I now have this

// QTip2 replacement for JQUI Tooltip
function QTip()
{

    var myPos = {   
                    target: 'mouse',
                    my: 'top left',
                    at: 'bottom right',
                    adjust: {
                             x:10,
                             y:20
                    }
    };
    
    
    $('[title]').each(function(){              
        
        if($(this).data('qtop'))
        {
            myPos = {  
                    target: 'mouse', 
                    my: 'bottom left',
                    at: 'top right',
                    adjust: {
                             x:5,
                             y:0
                    }
            };
        }
        

        $(this).qtip({ 
            style: { classes: 'qtip-light qtip-shadow qtip-rounded'},
            position: myPos            
        }); 
        
    });
    

}

Which works perfectly with the 'hand' pointer, and I can add a 'qtop' data attribute when I need to have the tooltip above instead of below the cursor.

Also Qtip2 resolves the issue of when you need to apply the tips again, it now overwrites the old one instead of leaving you with bizarre empty tips within tips like the original QTip was doing!

All working as desired, so thanks for turning me onto QTip, really appreciate it, much nicer than that JQUI one!

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[jpadie]

Note that the conditional inside the second code block will permanently overwrite the myPos variable the first time it is met. You might want to use a different variable with a ternary of if ... Else if you need the default myPos to remain a possibility.

There is a formal overwrite option too to force previous qtips to disapply.

 

[1DMF]

Once again your observation is impeccable,

It needs to be in the JQ each loop!

Your a diamond, thank you!

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[jpadie]

I think I'd do this for code/variable minimisation and personally I prefer to set the content.text explicitly

function qTipInit(){
var myPos = [{target: 'mouse',my: 'top left',at: 'bottom right',adjust: {x:10,y:20}},
             {target: 'mouse',my: 'bottom left',at: 'top right',adjust: {x:5,y:0}}];
$('[title]').each(function(){    
 $(this).qtip({
         style: { classes: 'qtip-light qtip-shadow qtip-rounded'},
         position: $(this).data('qtop') ? myPos[1] : myPos[0],
         content: {text: $(this).attr('title')},
         suppress: true
 });
});
}

 

[1DMF]

yeah, was considering similar to not keep resetting the var with ternary if.

var myPos = {
             bot: {target: 'mouse',my: 'top left',at: 'bottom right',adjust: {x:10,y:20}},
             top: {target: 'mouse',my: 'bottom left',at: 'top right',adjust: {x:5,y:0}}
};

Any reason for setting the content, I thought the default was to use the title attribute, so why force the content?

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[jpadie]

I set the content explicitly for readability. and if I ever go back and want to change it I don't have to relearn the API each time. within the content object you can also set a title and a url to fetch the text dynamically via an ajax get or more granularly via the content.text object

content: {
 text: function(e, api){
   $.ajax({ url: 'mypage.php', type:'post', dataType:'json', success: function(data){if(data.result == 'ok'){api.set('content.text',data.text);}});
   return 'Wait for it ...';
  },
 title: 'Ajax example'
},
...

 

[1DMF]

For me the JQ each selector kind of gives it away, but I guess it doesn't hurt to be verbose.

I now have

function QTip()
{

    var myPos = {
                 bot: {target: 'mouse', my: 'top left', at: 'bottom right', adjust: {x:10, y:20}},
                 top: {target: 'mouse', my: 'bottom left', at: 'top right', adjust: {x:5, y:0}}
    };
        
    $('[title]').each(function(){                      
        $(this).qtip({ 
            style: {classes: 'qtip-light qtip-shadow qtip-rounded'},
            position: ($(this).data('qtop'))?myPos.top:myPos.bot,
            content: {text: $(this).attr('title')},
            suppress: true            
        }); 
        
    });
    
}

working as desired and far more efficient, thanks for the assistance.

Good to know about the AJAX dynamic content, sure that will come in handy.

It still leaves artefacts when items are clicked, but at least they vanish after the cursor is moved, so an improvement on JQUI.


"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music