Updating theme: problems implementing icons with tooltip

JoanaTGBC
New Member
3 0 0

Hi!

I am updating my store theme, and I'm trying to recreate a feature I had on my product pages, but for some reason it's not working.

The feature I want to implement is this one:

tooltip.PNG

I need these icons to appear whenever there's a specific tag. I got that to work, the problem is that on the new theme, the tooltip is not working:

JoanaTGBC_0-1618836021093.png

This is the code I am adding to the product page:

{% if product.tags contains 'Vegan' %}
<div class="tooltip"><img src="{{ 'vegan.png' | asset_img_url: "32x" }}" onError="style.display = 'none';" /><span class="tooltiptext">Vegan</span></div>
{% endif %}
{% if product.tags contains 'CrueltyFree' %}
<div class="tooltip"><img src="{{ 'crueltyfree.png' | asset_img_url: "32x" }}" onError="style.display = 'none';" /><span class="tooltiptext">Cruelty Free</span></div>
{% endif %}
{% if product.tags contains 'Certified' %}
<div class="tooltip"><img src="{{ 'certified.png' | asset_img_url: "32x" }}" onError="style.display = 'none';" /><span class="tooltiptext">Certificado</span></div>
{% endif %}
{% if product.tags contains 'GlutenFree' %}
<div class="tooltip"><img src="{{ 'glutenfree.png' | asset_img_url: "32x" }}" onError="style.display = 'none';" /><span class="tooltiptext">Sem Glúten</span></div>
{% endif %}
{% if product.tags contains 'Gluten' %}
<div class="tooltip"><img src="{{ 'gluten.png' | asset_img_url: "32x" }}" onError="style.display = 'none';" /><span class="tooltiptext">Contém Glutén</span></div>
{% endif %}
{% if product.tags contains 'Organic' %}
<div class="tooltip"><img src="{{ 'organic.png' | asset_img_url: "32x" }}" onError="style.display = 'none';" /><span class="tooltiptext">Orgânico</span></div>
{% endif %}
{% if product.tags contains 'Vegetarian' %}
<div class="tooltip"><img src="{{ 'vegetarian.png' | asset_img_url: "32x" }}" onError="style.display = 'none';" /><span class="tooltiptext">Vegetariano</span></div>
{% endif %}
{% if product.tags contains 'Zero Waste' %}
<div class="tooltip"><img src="{{ 'zerowaste.png' | asset_img_url: "32x" }}" onError="style.display = 'none';" /><span class="tooltiptext">Sustentável</span></div>
{% endif %}

 

And this is the CSS code I am adding to the stylesheet.css:

/* ícones para as descrições dos produtos */

.tooltip {
position: relative;
display: inline-block;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 110%;
left: 50%;
margin-left: -60px;
}

.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

Thank you for the help!

 

 

0 Likes