Making a tooltip disappear after some time

Question

I have a Shopify store that when an user clicks on or move the cursor to a color, a tooltip shows up indicating the name of that color and fades away when the mouse is no longer hovering it. However, in touchscreens the tooltip doesn't go away unless the user clicks somewhere else in the website and swiping doesn't make it go away either. It's kinda annoying on mobile because it partially blocks the user visibility to the product images above.

I've searched this community and found a simple script. However, when using it in the swatch.liquid it doesn't work and would appreciate your help in this matter.

I've tried to add this script

<script>

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

</script>

to the code below

<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>

This is the result in a desktop when you hover the possible color options

And that's the tooltip that I wish to fade away after 2 seconds even if the mouse cursor is still on it.

Answer 1

you will have to implement some logic with onmouseenter and onmouseleave otherwise the

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

function will get called every time the mouse moves even a little bit

probably around

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

and a few ifs to handle errors if they pop up (not sure if you can doubly fade something out)