如何使工具提示与 jQuery 一起使用？ - jQuery

如何解决如何使工具提示与 jQuery 一起使用？ - jQuery

我正在制作工具提示。当鼠标悬停在红线区域时，工具提示应该会出现（效果很好）。

我遇到的问题是，当图标和工具提示之间的距离增加到 >80px 时，它停止工作。

我怎样才能让它随着距离的增加而发挥同样的作用？我的代码在 Codepen 中使用：

'moSEOver','mouseleave',adding classes,etc.

它们之间的空间是 ::after 有一个宽度，我认为如果增加工具提示的左侧，它可以同时增加和距离，但我不知道如何准确地做到这一点。

TOOLTIP CODEPEN

这是我在 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',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',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');
    });

请帮忙！