Text box on metafield image

[stefanensko]

As you can see in the image, i've added image to let people know if the product contain allergen

This is made using metafield

How to add a hover text box to let people know what the image is about?

Example the third symbol is "no caffeine", if you click on it or hover with the mouse i would like to have a box written "no caffeine"

[Liquid_xPert_SJ]

@stefanensko 

i dont have your store URL but i am suppose to use the structure of HTML, CSS, Hope you will understand how to do that with your own structure.

<div class="pro-info">
<img src="image.png">
<span>no caffeine</span>
</div>
<style>
.pro-info{
	position:relative;
}
.pro-info span{
	display:none;
}
.pro-info:hover span{
	display:block;	
}
</style>

thanks

[stefanensko]

Sorry, my fault

www.danicoffeeshop.com

[Liquid_xPert_SJ]

@stefanensko  never mind any product having these icons?

[stefanensko]

https://danicoffeeshop.com/products/english-breakfast?_pos=1&_psq=english&_ss=e&_v=1.0

[Liquid_xPert_SJ · Accepted solution]

this will be your code structure and css please update accordingly

<div class="allergen-image"> 
<img class="allergen-img" width="auto" height="auto" src="//danicoffeeshop.com/cdn/shop/files/senza_lattosio.svg?v=1712151485"> 
<span>Test</span> 
</div>
<style>
 .allergen-image {
	position: relative;
}
.allergen-image span {
	display: none;
}
.allergen-image:hover span {
	display: block;
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 14px;
}
</style>

Result:

[stefanensko]

Perfect, how do i activate this also for touch screen device? If you click on the allergen, appear the text

[stefanensko]

Another problem

As you can see here

https://danicoffeeshop.com/products/orzo-naturale?_pos=3&_psq=orzo&_ss=e&_v=1.0

hover the first icon, the text isn't on the same line, creating an overlap

[theycallmemakka]

Hi @stefanensko ,

We will have to add custom JS to make this possible. I have made this on my store. Please review it and let me know if this is something you want.

Site:https://mangit.myshopify.com/products/grayscale-camo-hybrid-baggy-pants-in-light-blue