Ingredient info on text hover for a beauty product brand

[mybrightbody]

Hi there! I have an indie beauty brand and would like to add in a feature where, when customers hover on an ingredient on our ingredient lists, it displays more information about the purpose and benefits and the EWG safety rating. You can see an example of what I'm talking about here with Hairstory.

I was hoping to find an app for this but it looks like I'll need to hire an Expert. Any guidance?

[KetanKumar]

Hello, @mybrightbody 

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

Please share your site URL,
So I will check and provide a solution here.

[simplealchemyco]

I am looking for this exact solution as well. 
My Shopify store is: https://simplealchemyco.com/ (it's published, but not available for shopping yet). Any input would be much appreciated! Thank you!

[KetanKumar]

@simplealchemyco 

please provide a preview URL and screenshot of where do you need it.

[simplealchemyco]

Sure thing!
Preview URL:
https://simplealchemyco.com/?key=31fd44b8fb6324170ef47b180f21337094a83903d57ffc4fc56b56c3500a2f37

We need this feature on all of our product pages, in the ingredients tabs
(pictured in screenshot). I was able to use HTML to create a text-on-hover
on one ingredient yesterday, but I deleted it after failing to successfully
edit the style. It was always black text on a gray background. We need it
to be Cream (#FAF6ED) text on a Charcoal (#302E2A) background, similar to
the Hairstory example provided earlier:
https://www.hairstory.com/products/new-wash/new-wash-original/, and
preferably with the same font (Source Sans Pro) as the rest of our body
text.

Thanks so much for your help!

[Melinda5]

Hello! I am interested in finding a solution for this as well. Any luck?