Small Tooltip Next to Product Variant Headers

[caseymac]

I've searched far and wide, but just cannot find a solution or an app for what I want. 

I would like to place a small icon (a small circle with an 'i' in it for "Info") next to some of my product variant headers. When a customer hovers over the icon, it will pop up a box describing the variant in more detail. The description will be mostly text, but could possibly include a small thumbnail square photo around 200px wide/high. 

An example of my product page is here: 
https://caseymacphoto.com/collections/prints/products/colorado-sand-dunes

Imagine next to FRAME was the 'i' icon when hovered over described in more detail what the customer could expect. 
Appreciate all insight in advance! 

[KetanKumar]

@caseymac 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

try this

https://codepen.io/fabriceleven/pen/KdveeO

[Mircea_Piturca]

Hi @caseymac 

You can try a custom code approach and display that tooltip on the variant input label. This can work well if you have just a few products. But scaling this to multiple products will be a problem.

I can recommend an app that may help (I am the app developer). Please see: https://apps.shopify.com/dynamic-variant-description

The approach would be to define a custom description for each variant. When the customer changes the variant, the description will change. You can provide more details for each individual variant this way. It is a different approach but may work well in your case. There are few demos on the App Store listing provided.

Please let me know if you have any questions. Happy to help out.