Заставить всплывающую подсказку исчезнуть через некоторое время - PullRequest
Новая
       32

Заставить всплывающую подсказку исчезнуть через некоторое время

0 голосов
/ 27 марта 2019

У меня есть магазин 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>

Это результат на рабочем столе, когда вы наводите возможные варианты цвета

tooltip

И это подсказка, которую я хочу исчезнуть через 2 секунды, даже если курсор мыши все еще на нем.

1 Ответ

0 голосов
/ 28 марта 2019

вам придется реализовать некоторую логику с помощью 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-ов для обработки ошибок, если они всплывают (не уверен, что вы сможете что-то затухать вдвойне)

...