一段时间后使工具提示消失

Question

我有一个Shopify商店，当用户单击或将光标移动到一种颜色时，将显示一个工具提示，指示该颜色的名称，并在鼠标不再悬停时淡出。但是，在触摸屏中，工具提示不会消失，除非用户单击网站上的其他位置并且滑动也不会消失。在移动设备上有点烦人，因为它部分阻止了用户对上面产品图片的可见性。

我搜索了这个社区并找到了一个简单的脚本。但是，当在swatch.liquid中使用它时，它将无法正常工作，非常感谢您的帮助。

我尝试添加此脚本

<script>

  $('[tooltip]').on('mouseover', function(){
  setTimeout(function(){
    $(this).find('.tooltip').fadeOut();
  }, 2000);

</script>

到下面的代码

<div data-value="{{ value | escape }}" class="swatch-element {% if is_color and section.settings.swatch_option == 'with_background' %}color with_bg_color {% elsif is_color and section.settings.swatch_option == 'without_background'%}color color_without_bg {% endif %}{% if is_color and section.settings.color_style == 'square_box' %}square_shape {% elsif is_color and section.settings.color_style == 'round_shape'%}round_shape {% endif %}{{ swatch }} {{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}">
    {% if is_color and section.settings.swatch_option == 'with_background' %}
    <div class="tooltip">{{ value }}</div>

    <script>

        $('[tooltip]').on('mouseover', function(){
  setTimeout(function(){
    $(this).find('.tooltip').fadeOut();
  }, 2000);

</script>

    {% endif %}
    <input id="swatch-{{ option_index }}-{{ value | handle }}-{{ section.id }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}" {% if forloop.first %}{% unless section.settings.enable_default_variant %} checked{% endunless %}{% endif %} {% unless variant.available %}disabled{% endunless %} />
    {% if is_color and section.settings.swatch_option == 'with_background' %}
    <label for="swatch-{{ option_index }}-{{ value | handle }}-{{ section.id }}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | asset_url }})">
        <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
    </label>
    {% else %}
    <label for="swatch-{{ option_index }}-{{ value | handle }}-{{ section.id }}">
        {{ value }}
        <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
    </label>
    {% endif %}
</div>

当您将鼠标悬停在可能的颜色选项上时，这是在桌面中显示的结果

这是我希望在2秒钟后消失的工具提示，即使鼠标光标仍在上面。

Answer 1

您将必须使用onmouseenter和onmouseleave实现一些逻辑，否则

 $('[tooltip]').on('mouseover', function(){
  setTimeout(function(){
    $(this).find('.tooltip').fadeOut();
  }, 2000);

每次鼠标移动一点点都会调用该功能

大概在

附近

$('[tooltip]').on('mouseenter', function(){
  //setVisible
  setTimeout(function(){
    $(this).find('.tooltip').fadeOut();
  }, 2000);
}
$('[tooltip]').on('mouseleave', function(){
    $(this).find('.tooltip').fadeOut();
}

还有一些if可以在错误弹出时进行处理（不确定是否可以将某些东西淡出）