Solved

Information icon on form questions?

CCBandanas
Tourist
16 0 2

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!

Accepted Solution (1)
oscprofessional
Shopify Partner
15830 2369 3072

This is an accepted solution.

Hello

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;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

Replies 8 (8)

oscprofessional
Shopify Partner
15830 2369 3072

Hello 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
CCBandanas
Tourist
16 0 2

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>

CCBandanas
Tourist
16 0 2

Site url is https://ccbandanas.com/

I appreciate your help!

oscprofessional
Shopify Partner
15830 2369 3072

This is an accepted solution.

Hello

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;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
CCBandanas
Tourist
16 0 2

Thank you!!

Tom_and_Juli
Explorer
52 0 15

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

Tom_and_Juli
Explorer
52 0 15

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;
}
}
}
The text after // is the title of the tooltip, since it turns out I have to generate and adjust new tooltip scss code for a different tooltip (it's text dependend, since the tooltip does not behave dynamically based on the text it contains). You need to adjust values like width, height, and others in the first part of the code. 
 
That's all that I have to add to my code, after that I just use the following html code in the products description html section or elsewhere:
<a class="tooltips">Symbol(s) that show tooltip on hover<span>Tooltip text</span></a>

The result looks like this.

Screen Shot 2020-04-29 at 11.06.42.png

BoxOfPops
Tourist
3 0 1

Did you ever get this set up? I have a version of it on my site but without the i or ? Icon