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

 

[jpadie]

can you point us to a page with this behaviour?

 

[1DMF]

No unfortunately it is a members only extranet.

I'll see if I can put a public facing demo page together and come back once done.



"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]

Well typically I have created a demo page and now can't re-produce the problem.

http://www.homeloanpartnership.com/tooltip.html

Then I thought, hang on a minute, let's try that locally and bingo, the problem arises with the above demo if you run it locally.

So copy the HTML and the jQuery resources, open the page, hover over the link, wait for the tooltip, then click the link and when you close the outlook email, and go back to the webpage the tooltip still shows and won't go away unless you click it?

Bit bizarre and I have noticed this problem with a separate site I'm developing that also is running over 'localhost' in a devel environment.

However, I uploaded the devel site to the live PSGI extranet and still have this artefact problem, so I'm not sure it is localhost causing the issue?



"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]

true enough on a mac too.
using remote (CDN) versions of the resources (and the latest of the 1.X branch of jquery too).
and using over a local webserver (i.e. no elevated file:/// privileges).

most odd. looks like a bug (obviously). qtip does not seem to have the same issue.

 

[1DMF]

Ok, thanks for confirming.

Glad it isn't anything stupid I was doing, though still a little annoying.

"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]

works ok on chrome for mac. the tooltip is still there on alt+tab back to the browser but as soon as the mouse moves it goes.
likewise safari.

the initial test I did was on FireFox.

so perhaps a bug in the implementation of the mouse position functionality in the jQueryUI core, in interpreting cursor data? I did test and FF does capture mouse information when tabbed back, even before being interacted on.

 

[1DMF]

Well I seem unable to solve this conundrum.

I have an anchor to a PDF, when then document is downloaded, the tooltip re-appears and won't go away until a click on either the tooltip or a blank part of the page is made.

I even tried using a hidden iFrame to load the document

    $('.sub_content a').on('click',function(e){
        e.preventDefault();        
        $('.ui-tooltip').remove(); 
        $('#load_doc').attr('src',($(this).attr('href')));
        $('.ui-tooltip').remove();        
    });

But no dice!

Very annoying.... So I came at it from a different angle...

I changed all the anchors to spans, altered the href to be a data attribute and used the same mechanism utilizing an iframe to load the document...

HTML

<span data-href="/get_doc/document_path/document_name.doc" title="Download -&gt; my document">This a word document (DOC)</span>
<iframe id="load_doc"></iframe>

JS

    // fix JQuery tooltip UI problem!
    $('.sub_content span').on('click',function(e){       
        $('.ui-tooltip').remove();        
        $('#load_doc').attr('src',($(this).data('href')));                                     
    });

This has resolved the problem in FF, Chrome & Opera and kind of in IE. If you choose to open or save the document in IE, it works fine, however, if you choose cancel the darn tooltip re-appears!

I guess this approach will have to suffice as it is 99% resolving the problem doing it this way even though technically I now have non-semantic mark-up!




"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]

seems quite a heavyweight workaround! how about using an alternative library such as qTip?

 

[1DMF]

yeah, I see what you are saying, but as I have the JQUI already loaded, it seemed the best option to use it and not load another.

What is really odd is if I have a single link (ok span, in this case) per line it doesn't suffer from the artefact, but if I set the span inline-block with a fixed width so the bounding box allows two links per line/row then the artefact appears.

Very bizarre, I'll have a look tomorrow at the qTip library and see what it has to offer.

"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, refactoring to use QTips as JQuery UI tooltips is just far too broken!

Don't suppose you know how to get QTip to position the corner on the bottom of the mouse pointer instead of the top?

This doesn't seem to work

        $('[title]').qtip({ 
            style: { name: 'light', 
                    tip: true,
                    width: { max: 600}  },
            position: {
                    target: 'mouse',
                    corner: {
                        target: 'bottomMiddle',
                        tooltip: 'bottomLeft'
                    }
                },
            adjust: {mouse:true}
                 
            });

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]

in fact I can't get the style:{width:{max:}}} to work either?

"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]

yup, 'min' works, 'max' doesn't - bloody tooltips!

"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]

Don't suppose you know how to get QTip to position the corner on the bottom of the mouse pointer instead of the top?

This just doesn't seem possible.

For some reason when the cursor it a pointer (hand) the tip is covered by it as the tip pointer is focusing on the top of the icon, weirdly when it is the text cursor (I), the tip pointer is right on the bottom of the cursor icon.

I've tried the adjust {y:} with positive and negative numbers but no dice.

"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]

sorry - i've not had a moment's trouble with qTips.

 

[1DMF]

Justin, don't get me wrong I thing QTips is far superior to JQUI.

So if I'm doing something stupid and you can help me resolve the issues I seem to be experiencing, please advise.

Either way, Qtips will remain in replace of JQUI when we go live.

"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]

Turns out there is a second project QTip2 :

http://qtip2.com

Which has resolved my issues

"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]

correction, it didn't , it is impossible to get it to correctly position to the bottom right of the cursor and leave the target clickable.

1DMF <-- defeated :-(


"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]

sorry - yes qtips2 is what we all use now.

I'm not sure that I follow what you need by way of positioning. could you post a quick sample? qtips is pretty flexible with its api, and you can always override things too

 

[jpadie]

I think I grasp what you want. and if I'm correct then that's easy to solve.

i've put up a fiddle here:

http://jsfiddle.net/1n9vLak4/9/