How to make two IDs remember cookie and independently close?

've tried this on many places, but not here.

I'm trying to make a tooltip using jQuery, with HTML and CSS. Each tooltip is different by the id and that works great, so I can make as many tooltips as I want and style them independently.

What I lack to understand is how can I make a tooltip to close, without affecting other tooltip(s). I'm using Regex Exp for cookies and all tooltips are on the same page.

Please note that #tooltip2 appears several time (4) on different locations on website, while #tooltip1 appears only once. If I click close on #tooltip2 I don't want it to affect #tooltip1, but to close all #tooltip2 divs. If I click close on #tooltip1, I want it only to close #tooltip1 divs.

Here is a part of code:

HTML:

<a href="javascript:;" class="tooltipMe no-print" id="tooltip1"><img src="images/icons/icon-tooltip-help.png" /><span class="tooltip-data">Tooltip 1 Text<span class="outerone"><span class="btn-close"><img src="http:/images/icons/icon-tooltip-close.png"  /></span></span></span></a></span>

<span class="tooltip-master"><a href="javascript:;" class="tooltipMe no-print" id="tooltip2"><img src="/images/icons/icon-tooltip-help.png" /><span class="tooltip-data">Tooltip 2 Text<span class="outer"><span class="btn-close"><img src="images/icons/icon-tooltip-close.png"  /></span></span></span></a>

HTML:

jQuery:

(function(){
$('.tooltipMe').each(function(){
    var tooltip = $(this);
    var tooltipId = tooltip.attr('id');

    if( !getCookie(tooltipId) ) {
        tooltip.on('click.tooltipMe', function(){
            tooltip.addClass('hover');

            tooltip.find('.btn-close').on('click', function(){
                var date = new Date();
                date.setDate(date.getDate() + 1);
              //tooltip.removeClass('hover').off('mouseenter.tooltip'); - in case we want to remove only tooltip
              // Start of #tooltip1
                $('.outerone > .btn-close').each(function(){ //code for #tooltip 1 - using 'each'
                    $('.tooltip-masterone > .tooltipMe').hide('fast'); //select what to hide and how
                document.cookie = tooltipId + "=true; path=/; expires=Th, 31 Dec 2099 11:00:00 GMT;" + date.toUTCString();

                 function getCookie(name) {
    var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
    return matches ? decodeURIComponent(matches[1]) : undefined; // cookie solution with RegExp
}
                });
              // #tooltip1 end line
              // Start of #tooltip2
                $('.outer > .btn-close').on('click', function(){ //code for #tooltip 2 - using 'click'
                    $('.tooltip-master > .tooltipMe').hide('fast'); //select what to hide and how

                document.cookie = tooltipId + "=true; path=/; expires=Th, 31 Dec 2099 11:00:00 GMT;" + date.toUTCString();

                });
            });
        });
    }
    else {
      tooltip.hide();
    }
});

function getCookie(name) {
    var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
    return matches ? decodeURIComponent(matches[1]) : undefined; // cookie solution with RegExp

Code (JavaScript):

This all works perfectly, but I don't know how to close this independently. Tooltip2 closes tooltip1, then it closes afterwards, while tooltip1 works okay if clicked first.

Please note that I am a rookie at jQuery..

Thanks guys.

 

You can try something like this:

<div class="tooltipMe">
     <a class="btn-close" href="javascript:return false;" onclick="closePopup(this)">Close Pop-up</a>
</div>

HTML:

public function closePopup(element) {
    var tooltip = $(element).closest('.tooltipMe');
    //You can add remaining logic here...
}

Code (JavaScript):

 

Thanks.. could you please elaborate more?

Thanks.

 

I'll try to explain:
Ok, for what I understand you want to close a popup when someon clicks on some kind of "X" button right?
The HTML code represents a popup, and the anchor inside of it represents the close button. This close button calls "closePopup" function sending itself as a parameter.
The Javascript code searches for the parent element with class "tooltipMe" and stores it in a variable. Then you can use this variable to hide your popup.
I made an example:
https://jsfiddle.net/bny8j76f/

 

Apart from that you shouldn't declare the function "getCookie" inside a loop. Also, you're declaring it again at the end of the document.

 

I will try and let you know, but I'm not that good in JavaScript.
Could you please see my jQuery and let me know what do I do there?
Should I use more "document" sessions?
Also, where should I put my "getCookie" function?

 

About the "getCookie" function, put it before everything.
What you mean by "document" sessions?
If you provide some screenshots, maybe we can help you better.

I just don't understand what storing cookies as to do with tooltips.

 

I meant this: Should I use document.ready for each tooltip or I can put it into one document?

Well, cookies store if the tooltip has been closed and it will never appear for that cookie, that is why.

 

Tooltip => http://gregtaff.com/blog/media/tooltip_preview.png
Popup => http://thebestofemail.com/wp-content/uploads/2013/12/LewisHowes_email_signup_popup.jpg

Popup or tooltip?

 

For God's sake, I appreciate all the help, but where did I write "popup"?

Tooltip, of course.

 

-.^
I just asked because I don't see the point of storing if a user closed a tooltip... anyway, basically create an html structure for the tooltips:

<div class="tooltipMe">
     <a class="btn-close" href="javascript:return false;" onclick="closeTooltip(this)">Close</a>
</div>

HTML:

Adding onclick="closePopup(this)" will make the browser call function closePopup and send the element clicked as a parameter.
Now on this function we close our tooltip + store a cookie saying that we closed this tooltip. To identify each tooltip you can have an attribute data-tooltip-type which should be unique.

<div class="tooltipMe" data-tooltip-type="tooltip-A">
     <a class="btn-close" href="javascript:return false;" onclick="closeTooltip(this)">Close</a>
</div>

HTML:

Then on the closeTooltip function:

function closeTooltip(closeElement) {
     var tooltip = $(closeElement).closest('.tooltipMe'),
tooltipType = tooltip.attr('data-tooltip-type');
     tooltip.hide(); //hide the tooltip
//store cookie with name tooltipType and value 1 for example
// you can read about storing cookies here: http://www.w3schools.com/js/js_cookies.asp
}

Code (JavaScript):

Then to hide the tooltips when the page load, just run something like

$('.tooltipMe').each(function(){
     tooltipType = $(this).attr('data-tooltip-type');
     //use the functions from the link above to get cookie using tooltipType and store the value on a variable called alreadyClosed for example
     //make sure to declare the functions  from the link as global / at the top
     //then finally
     if(alreadyClosed === 1){
          $(this).hide();
     }
});

Code (JavaScript):

As simple as that.

 

Try a different route. Just let your tooltips open / close independently. Something like this:

http://jsfiddle.net/q4ra0gbb/42/

Very simple and practical.

PS By the way you can change .click to .hover if you want them to open on hover:

http://jsfiddle.net/q4ra0gbb/43/

 

1) If these are ACTUALLY tooltips, what's wrong with the TITLE attribute? (apart from being unable to style it)

2) if these are too big or you want styling, why would you be using cookies? Is this really something you want persistent across page-loads? (the ONLY reason to use cookies?!?)

3) Might it not be better to make these somehow focus based so when the user is on the element it shows? Not sure why you'd want them to stay open, much less why they'd have a close box if these are actual tooltips.

Really to me it seems like throwing a bunch of scripttardery at something that -- to be frank -- sounds like your labels or form (assuming that's what these are for) have major issues in purpose or clarity.

Admittedly, I say that 99.999% of the time people throw jQuery at much of anything. Pointless code bloat nonsense that PROBABLY has no blasted business on a website in the first place. There's a reason I'd sooner suck on the end of an "expanding gas lead projectile accelerator" than deploy ANY of the code presented so far in this thread. "onclick" -- really? what is this, 1997?

Really though you've not presented enough of the ACTUAL markup and ACTUAL data being manipulated for anyone to provide an actual meaningful answer. What's the tooltip FOR? What's the content OF the tooltip? How are you triggering it being shown (since you didn't actually provide that).

But really even without that, the train wreck of jQuery nonsense in the original post, much less the gibberish bloated markup? I'd throw all that in the trash and do a serious re-evaluation of whatever it is you are working on. It feels like you are overthinking something simple; what that something is who can say as you didn't provide that.