How to make the Tooltip work with jQuery? - jQuery

Question

I am making a tooltip. When hovering over the red lined areas, the tooltip should show up (which works fine).

The problem I have is that when increasing the distance to >80px between the icon and the tooltip, it stops working.

How could I make it work the same with increasing distance? My code is in Codepen using:

'moseover', 'mouseleave', adding classes, etc.

the space between them is a ::after that has a width, I think it could be increased at the same time and distance if the left of the tooltip is increased, but I don't know how to do it exactly.

TOOLTIP CODEPEN

This is my code in jquery...

    let keepOpen = false;
    $(document).on('mouseover', '.Hotspot__icon', function(){
      let id = $(this).data('tooltip');
      $(this).addClass('Hotspot__hover');
      $(this).parents('.Hotspot').addClass('Active__tooltip');

      if ($('#' + id).hasClass('Tooltip__right')) {
        $('#' + id).removeClass('Tooltip__left');
        $(this).removeClass('tl');
        $(this).addClass('tr');
      } 

      if ($('#' + id).hasClass('Tooltip__left')) {
        $('#' + id).removeClass('Tooltip__right');
        $(this).removeClass('tr');
        $(this).addClass('tl');
      }

      keepOpen = true;
      $('.Hotspot__content').css('display', 'none');
      $('#' + id).css('display', 'block');

    }).on('mouseleave','.Hotspot__icon',function(){ 
      let id = $(this).data('tooltip');
      $(this).removeClass('Hotspot__hover');
      $(this).parents('.Hotspot').removeClass('Active__tooltip');

      if ($('#' + id).hasClass('Tooltip__right')) {
        $('#' + id).removeClass('Tooltip__left');
        $(this).removeClass('tr');
        $(this).removeClass('tl');
      } 

      if ($('#' + id).hasClass('Tooltip__left')) {
        $('#' + id).removeClass('Tooltip__right');
        $(this).removeClass('tl');
        $(this).removeClass('tr');
      }

      keepOpen = false;
      if(!keepOpen){
        $('#' + id).css('display', 'none'); 
      }

    }).on('mouseover','.Hotspot__content',function(){
      let id = $(this).attr('id');
      $('[data-tooltip="'+id+'"]').addClass('Hotspot__hover');
      $('[data-tooltip="'+id+'"]').parents('.Hotspot').addClass('Active__tooltip');

      if ($(this).hasClass('Tooltip__right')) {
        $(this).removeClass('Tooltip__left');
        $('[data-tooltip="'+id+'"]').addClass('tr');
        $('[data-tooltip="'+id+'"]').removeClass('tl');
      } 

      if ($(this).hasClass('Tooltip__left')) {
        $(this).removeClass('Tooltip__left');
        $('[data-tooltip="'+id+'"]').addClass('tl');
        $('[data-tooltip="'+id+'"]').removeClass('tr');
      }

      keepOpen = true;
      $(this).css('display', 'block');

    }).on('mouseleave','.Hotspot__content',function(){
      let id = $(this).attr('id');
      $('[data-tooltip="'+id+'"]').removeClass('Hotspot__hover');
      $('[data-tooltip="'+id+'"]').parents('.Hotspot').removeClass('Active__tooltip');


      if ($(this).hasClass('Tooltip__right')) {
        $(this).removeClass('Tooltip__left');                
        $('[data-tooltip="'+id+'"]').removeClass('tr');
        $('[data-tooltip="'+id+'"]').removeClass('tl');
      } 

      if ($(this).hasClass('Tooltip__left')) {
        $(this).removeClass('Tooltip__right');
        $('[data-tooltip="'+id+'"]').removeClass('tl');
        $('[data-tooltip="'+id+'"]').removeClass('tr');
      }

      keepOpen = false;
      $(this).css('display', 'none');
    });

Please help!