Can't get tooltip to go away

Question

In a form, I have a State dropdown and a Zip Code text box. The client has specified they want to check to be sure the zip code matches the state, and if not, to pop up a message and prevent the form from being submitted.

After either the zip or the state is changed, I call an ajax function on the server to make sure the zip code is inside the state. If not, I pop up a tooltip over the zip code check box that says "Zip Code Not In Selected State". So that the tooltip doesn't appear unless there is a mismatch, I don't add it until/unless the zip doesn't match the state. That all works well.

Then, if the zip code changes, and it matches, I want to get rid of the tooltip. This is the part I can't get working. No matter what I try, that pesky tooltip sticks around, even after the zip matches the state.

Here's the client side method:

function CheckZip() {
    var zip = $("#ZipCode").val();
    var zipLength = zip.length;
    var state = $("#StateCode").val();

    if (zipLength === 5) {
        $.getJSON("/Home/CheckZip", { zipCode: zip, stateCode: state },
        function (data) {
            if (data == "true") {
                $('#ZipCode').tooltip('disable');
                $('#ZipCode').tooltip().mouseover();
            }
            if (data == "false") {
                $('#ZipCode').attr('data-toggle', 'tooltip');
                $('#ZipCode').attr('data-placement', 'top');
                $('#ZipCode').attr('title', 'Zip code not in selected state.');
                $('#ZipCode').tooltip().mouseover();
                DisableSubmitButton();
            }
            if (data == "error") {
                // todo
            }
        });
    }
    else {
        DisableSubmitButton();
    }
}

This doesn't seem to be the right combination to make the tooltip go away.

$('#ZipCode').tooltip('disable');
$('#ZipCode').tooltip().mouseover();

I've also tried just removing all the attributes, opposite of what's done in if (data == "false"). That didn't work either.

Any ideas?

Try to change `disable` to `hide`. Also remove the line below hiding the tooltop otherwise it will show up again :) — node_modules, Feb 24 '17 at 14:16

score 1 · Answer 1 · answered Feb 24 '17 at 14:27

1

Try this once :

$("#ZipCode").off('mouseover',rf);

answered Feb 24 '17 at 14:27

Najitha Sidhik

131
9

Nope. Same result. I think I'm going to have to use something other than a tooltip. – Casey Crookston Feb 24 '17 at 14:28
did you try this link : $( ".selector" ).tooltip( "option", "disabled", true ); – Najitha Sidhik Feb 24 '17 at 14:29
you have to mention option-hide/disabled – Najitha Sidhik Feb 24 '17 at 14:30

score 1 · Answer 2 · answered Feb 24 '17 at 14:32

As I asked you in the comments if you were using bootstrap, I have an anwer for you. To hide the tooltip you must change disable to hide. Also you have to remove the line below the hide event, like this:

if (data == "true") {
    $('#ZipCode').tooltip('hide');
}

Documentation for bootstrap tooltips can be found here

I hope this will help!

score 0 · Accepted Answer · edited May 23 '17 at 12:10

0

What I ended up doing was just creating my own div which, using CSS, hovers just over the Zip textbox. I can hide it and show it whenever I want. This works perfectly. Found a thread here on Stack Overflow that showed me how to do the css:

Relatively position an element without it taking up space in document flow

edited May 23 '17 at 12:10

Community

1
1

answered Feb 24 '17 at 15:11

Casey Crookston

13,016
24
107
193

Can't get tooltip to go away

3 Answers3