Information icon on form questions?

Solved
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!

0 Likes
Highlighted

Hello 

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
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>

0 Likes
Highlighted
Tourist
16 0 2

Site url is https://ccbandanas.com/

I appreciate your help!

0 Likes
Highlighted

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;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
16 0 2

Thank you!!

0 Likes
Highlighted
Explorer
48 0 9

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

0 Likes
Highlighted
Explorer
48 0 9

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

0 Likes