How to make two tooltip ids independently close, and remember cookie?

Question

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

Answer 1

I have finally figured out the answer to this, and I'm posting only as I want to contribute to this community. This maybe not very common request, but I am sure some will stumble on it and I will be more than happy knowing that it actually helped someone.

(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('.close-one > .btn-close').on('click', function(){ //accuratelly target .btn-close class
                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
                $('.close-one > .btn-close').each(function(){ //code for #tooltip 1 - using 'each'
                    $('.tooltip-masterone > #tooltip1').fadeOut('slow'); //select what to hide and how      

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

              // Start of #tooltip2
               tooltip.find('.close-two > .btn-close').on('click', function(){ //accuratelly target .btn-close class
                var date = new Date();
                date.setDate(date.getDate() + 1);
                $('.close-two > .btn-close').each(function(){ //code for #tooltip 2 - using 'each'
                    $('.tooltip-master > #tooltip2').fadeOut('slow'); //select what to hide and how

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

                });
            });
            // tooltip2 end line
        });
    }
    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
}

So the solution is pretty simple: you need to target each class more "precise", so it will not close ".btn-close" generally, like it did before, but it will close the exact ".btn-close" inside the parent class. ie.

$('.class > .class.').each(function(){});

Now each #tooltip is closed independently and you can put as many tooltips as you want. I'm sure there are better solutions to this, like placing a variable for each ".class > .class", but this works great as well.

Cheers.