Can't remove title element when tooltip is displaying

can definition
can synonym
can noun meaning
can verb
can bus
can airport
can network
can band

I'm adding a title to a div with a simple line of:

j$("#div").attr("title", "My title.");

Inside the div is a selector box. When you select something in the selector box, it then calls code to remove the title of the div. (This is using the .change function, if it matters.)

j$("#div").removeAttr("title");

This code works great if the current title tooltip is not displayed. However, if the title tooltip is being displayed, the jQuery can not remove the title from the div. Because the selector is inside the div, mousing over the selector displays the title. Going down and selecting an item in the selector keeps the tooltip displayed the entire time. Even if I force-close the tooltip, the removeAttr code still can't remove the title, because the code executes faster than the tooltip's fadeout.

I either need a way to successfully stop the animation (I've tried using variants on stop, and can just never seem to actually get the tooltip correctly to run stop on it), a way to delay the code that removes the title until the fadeout is finished (I tried settimeout, whic didn't work), or a way to force remove the title even though the tooltip is still open.

You haven't said how you are creating the tooltips, which matters.

If you are using jQueryUI's tooltips feature (and if not, why not?), then you must use tooltip('destroy') to unbind the tooltips, thus:

jsFiddle Working Demo

HTML:

<div id="div">
    <select id="divSel">
        <option value="0">Choose One:</option>
        <option value="1">One</option>
        <option value="2">Two</option>
    </select>
</div>
<input type="button" id="mybutt" value="Add Title" />

jQuery/javascript:

$(document).tooltip();

$('#divSel').change(function() {
    $(document).tooltip( "destroy" );
    $("#div").removeAttr("title");
});

$('#mybutt').click(function() {
    $("#div").attr("title", "This is a title added to display a tooltip.");
    $(this).hide();
});

css:

#div {width:20%;height:80px;background:wheat;margin-bottom:10px;}
#divSel{margin-top:30px;margin-left:30px;}

Can, Can was the leading avant-garde rock group of the 70s. Can experimented with noise, synthesizers, non-traditional music, cut-and-paste techniques, and, most� Can definition, to be able to; have the ability, power, or skill to: She can solve the problem easily, I'm sure. See more.

You could use fadeOut() or something similar. The function callback is executed when the fade out is complete.

$( "#div" ).click(function() {
  $( "#div" ).fadeOut( "slow", function() {
    // Animation complete.
  });
});

Can, can meaning: 1. to be able to: 2. used to say that you can and will do something: 3. to be allowed to: . Learn more. Define can. can synonyms, can pronunciation, can translation, English dictionary definition of can. to be able to, have the power or skill to: I can take a bus to the

Without any code it's hard to say what might be wrong, but I am unable to recreate this issue.

See this fiddle:

HTML

<div id="div" title="My title.">
<div>#div</div>
<select id="sel">
    <option value="0">Add tooltip</option>
    <option value="1">Remove tooltip</option>
    <option value="">Do Nothing</option>
</select>
</div>
<div>Log:</div>
<div id="logger"></div>

jQuery/Javascript

var $log = $('#logger');
function log(text){
    $log.append($('<div></div>').html(text));
}
$('#sel').change(function(){
    switch(parseInt($(this).val())){
        case 0:
            $('#div').attr("title", "My title.");
            log('Added tooltip');
            break;
        case 1:
            $('#div').removeAttr("title");
            log('Removed tooltip');
            break;
        default:
            log('Nothing happened');
    }
});

CSS

#div{height:200px;width:200px;background:#FFFFF0;border:1px solid red;}

The Official CAN / Spoon Records Website, VerbEdit. can (third-person singular simple present can, present participle -, simple past could, past participle (obsolete except in adjectival use) couth). can definition: 1. to be able to: 2. used to say that you can and will do something: 3. to be allowed to: . Learn more.

CAN, 1.4Used to indicate that something is typically the case. 'antique clocks can seem out of place in modern homes'. More example sentences. 110 synonyms of can from the Merriam-Webster Thesaurus, plus 97 related words, definitions, and antonyms. Find another word for can. Can: to bring (as an action or operation) to an immediate end.

can, A can is a metal container in which something such as food, drink, or paint is put. The container is usually sealed to keep the contents fresh. Several young men� Find the latest Canaan Inc. (CAN) stock quote, history, news and other vital information to help you with your stock trading and investing.

Can, can 2. (kăn). n. 1. A usually cylindrical metal container. 2. More than any other band, Can, formed in Cologne by two classically-trained musicians, bassist Holger Czukay and pianist Irmin Schmidt (both alumni of Karlheinz Stockhausen), and by Globe Unity's free-jazz drummer Jaki Liebezeit, transformed progressive-rock into a science.

Comments
  • You mean .stop() or .finish()?
  • I've specifically tried .stop(). I have not tried .finish().
  • I'm not using jQueryUI's tooltis feature because they're not really needed. All I need is to add a title on a div under certain conditions, and to remove it under other conditions. That's all. I did try explicitly using your suggested method. It still won't remove the title attribute if the tooltip is displayed.
  • Okay, then something else is going on. See this revised jsFiddle -- all jQueryUI tooltip code has been removed. Note that the title attr removes just fine when select is changed. (Use Chrome Dev Tools - F12 in Chrome - to watch in real time as the title is added to the DIV, then removed when select is changed.)
  • Edited. Yes, the revised fiddle works now. Interesting. So even though I'm not explicitly using jQueryUI code, it's still likely the cause. I know the library is there. I'll have to work around that. Thanks. I really appreciate it.
  • I'm not dynamically showing/hiding a div s a popup. What you have there would hide the div my selector is in. It would work great if I knew how to find the actual popup tooltip that occurs on div over.