Hide an element for three minutes of connectivity

I have a chat application and I would like to display a "request supervisor" button to display after three minutes of the user being c开发者_Python百科onnected. This would include a user refreshing the page.

Here is what I have, but it's really not sufficient at all;

//shows the tooltip in 3 minutes
window.setTimeout(function(){
        $("#panic-tooltip").fadeTo(1000, 1);
    }, 180000);

Obviously if the user refreshes the page it locks up. I was thinking about using a cookie somehow... I'd prefer not to have to have to do anything on the backend, but I might have to. Also, I am aware that push technology would be a good solution, but that's not an option here.

I'm using HTML5/CSS3/jQuery/jQuery UI btw if any of that is helps.

Thanks!

This is what i ended up using... too bad davin or mellamokb didn't answer lol

if($.cookie("showPanic") == 'yes'){
    $("#panic-tooltip").fadeTo(1000, 1);
} else {
    window.setTimeout(function(){
        $("#panic-tooltip").fadeTo(1000, 1);
        $.cookie("showPanic", "yes");
    }, 180000);
}

Given you have a function to set a cookie and one to retrieve a cookie, it is relatively simple.

On first visit you set the cookie with the current time like this:

if(!getCooke('first_visit')) setCookie('first_visit', new Date().toString());

But only if the cookie is not already present.

Additionally you have an interval loop the checks for the difference in time:

var timer = setInterval(function(){
    var oldDate = new Date(getCookie('first_visit')),
        newDate = new Date();

    if(newDate - oldDate > 180000){  //time is in miliseconds
        clearInterval(timer);
        //show your message here
        $("#panic-tooltip").fadeTo(1000, 1);

    } 
},1000);