INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

JQuery UI ToolTip - leaving artefacts when elements are clicked

JQuery UI ToolTip - leaving artefacts when elements are clicked

JQuery UI ToolTip - leaving artefacts when elements are clicked

(OP)
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

CODE

$(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

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

can you point us to a page with this behaviour?

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

(OP)
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

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

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.

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

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.

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

(OP)
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

CODE

$('.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

CODE

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

JS

CODE

// 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

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

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

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

(OP)
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

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

(OP)
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

CODE

$('[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

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

(OP)

Quote:

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

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

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

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

(OP)
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

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

(OP)
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 sad

"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

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

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

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

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/

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

(OP)
Thanks Justin,

Found this worked for me...

CODE

adjust: {
          x:10,
          y:20   
      } 

I think because I still had

CODE

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

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

(OP)
no, just realised my schoolboy error...

CODE

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

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

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).




RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

(OP)
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

CODE

// 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

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

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.

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

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

CODE

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
 });
});
} 

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

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

CODE

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

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

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

CODE

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'
},
... 

RE: JQuery UI ToolTip - leaving artefacts when elements are clicked

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

I now have

CODE

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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close