How to hide a tooltip?

Question

I'm working on website using CRM (drupal) and the tooltip for mobile i don't know how to hide it when i click on it again this is the website http://www.cfb.it in the section of servizi the tooltip work fine for the desktop, but when I try to access the website from the phone (I tried iphone and samsung) and click on it, the tooltip appear but I cannot hide it back again once I click it's stay.

Here is the jquery code for this tooltip, I don't know what is missing.

(function($) {

  $(document).ready(function() {

  function tooltipInit() {
              var tooltip = jQuery('.tooltip'),
                  target = jQuery('.icon'),
                  arrow = jQuery('.arrow-down'),
                  mobile = jQuery(window).width() < 960,
                  desktop = jQuery(window).width() > 960
              if (mobile) {
                  jQuery(".overview:odd").addClass('pull-left');
                  target.click(function() {
                      target.css({
                          "background-position": "top"
                      });
                      jQuery(this).css({
                          "background-position": "bottom"
                      });
                      tooltip.removeClass('visible');
                      arrow.removeClass('visible');
                      jQuery(this).siblings('.tooltip, .arrow-down, .details').addClass('visible');
                       $this = $(this);
                       $this.parents('.icons').find('.details').removeClass('mobile-show');
                       $this.find('.details').addClass('mobile-show');
                  });
                  tooltip.click(function() {
                      jQuery(this).removeClass('visible');
                      jQuery(this).siblings('.arrow-down').removeClass('visible');
                      jQuery(this).siblings('.icon').css({
                          "background-position": "top"
                      });
                  });
                  target.unbind('mouseenter');
                  target.unbind('mouseleave');
              }
              if (desktop) {
                  jQuery('.pull-left').removeClass('pull-left');
                  target.css({
                      "background-position": "top"
                  })
                  tooltip.removeClass('visible');
                  arrow.removeClass('visible');
                  target.bind('mouseenter', function() {
                      jQuery(this).siblings('.tooltip, .arrow-down').addClass('visible');
                      jQuery(this).css({
                          "background-position": "bottom"
                      });
                      var removeTooltip = function() {
                          tooltip.removeClass('visible');
                          arrow.removeClass('visible');
                      };
                      target.bind('mouseleave', removeTooltip);
                      target.bind('mouseleave', function() {
                          jQuery(this).css({
                              "background-position": "top"
                          });
                      });
                  });
              }
          }
          jQuery(window).on("resize", tooltipInit);
          jQuery(document).on("ready", tooltipInit);

This tooltip is similar to this one in this website http://visia.themes.tf/ I will appreciate your help please

Answer 1

Hello Please use below code to track if devide is mobile device or not then execute your code

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}