让工具提示在一段时间后消失答案

【问题标题】：Making a tooltip disappear after some time让工具提示在一段时间后消失
【发布时间】：2019-08-18 12:56:12
【问题描述】：

我有一个 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 秒后消失的工具提示，即使鼠标光标仍在上面。

【问题讨论】：

标签： javascript hover tooltip fade angularjs-watch

【解决方案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();
}

如果出现错误，还有一些 ifs 来处理错误（不确定是否可以双重淡出）

【讨论】：