Liquid, JavaScript, themes, sales channels
I have a form that I use on product pages. After the question on the form I would like a small "i" icon or "?" icon with a circle around it, that when clicked brings up a text box to better clarify why we're asking that question on the form.
Any help coding this would be much appreciate, thank you!
Solved! Go to the solution
This is an accepted solution.
Hello CCBandanas,
1) Add this HTML on next to the input field HTML
<div class="tooltip"><i class="fas fa-question-circle"></i> <span class="tooltiptext">Tooltip text</span> </div>
2) Add this link to theme.liquid
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/fontawesome.min.css
3) Add the below given css to theme.scss.liquid
.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; }
Hello CCBandanas,
Can you let me know how you are adding the form on product page. Generally we use https://ui-elements-generator.myshopify.com/ to add the extra field on the product page.
Also can you share your site URL.
You need a "tooltip" to be implemented. Correct??
Hi there! Yes a tooltip is what I'm looking for, I didn't know what they were called! This is my current code on the product liquid theme:
<p class="line-item-property__field">
<label for="what-is-your-dogs-name">What is your dog's name?</label>
<input id="what-is-your-dogs-name" type="text" name="properties[What is your dog's name?]">
</p>
This is an accepted solution.
Hello CCBandanas,
1) Add this HTML on next to the input field HTML
<div class="tooltip"><i class="fas fa-question-circle"></i> <span class="tooltiptext">Tooltip text</span> </div>
2) Add this link to theme.liquid
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/fontawesome.min.css
3) Add the below given css to theme.scss.liquid
.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; }
Thank you!!
Hi @oscprofessional,
I can't figure out how to add the link there (into theme.liquid). It gets pasted there as regular text and then shows up on every subpage of my store (if you know what I mean).
What is the proper way to insert it?
Many thanks,
Tomas
For anyone wondering in the future I found and implemented a solution shortly after my post. It is somewhat similar. I simply use a Tooltip CSS generator to generate an appropriate tooltip code (it gives you html and scss (css is default but you can change that to scss)). I use the one here and here.
In the end I got this SCCS code which I put into my theme.scss.liquid asset folder:
// 1st tooltip (vzorky)a.tooltips {position: relative;display: inline;span {position: absolute;width: 200px;color: #ffffff;background: #000000;height: 90px;line-height: 26px;padding: 7px;font-size: 15px;text-align: center;visibility: hidden;border-radius: 6px;&:after {content: '';position: absolute;top: 100%;left: 50%;margin-left: -0px;width: 0;height: 0;border-top: 8px solid #000000;border-right: 8px solid transparent;border-left: 8px solid transparent;}}}a {&:hover.tooltips {span {visibility: visible;opacity: 1;bottom: 30px;left: 0%;margin-left: -76px;z-index: 999;}}}
<a class="tooltips">Symbol(s) that show tooltip on hover<span>Tooltip text</span></a>
The result looks like this.
Did you ever get this set up? I have a version of it on my site but without the i or ? Icon
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024