Is there a way to Add Text with a Link or Hover to Liquid?

Solved

Is there a way to Add Text with a Link or Hover to Liquid?

Bikes-Angel
Explorer
65 1 23

Wondering if anyone can point me in the right direction as how to achieve or find instruction on "how to" for the following.
Any help would be greatly appreciated.

It seems that a lot of people even in this day and age do not understand what copyright/trademark means.  I create personalized gifts, but will not infringe on anyones IP  so even though I add a <p   line that says  please do not request or upload any copyrighted/trademarked text or images.... I still get them and then people say... Oh I didn't know that was coyrighted ... cancel my order  😢  So What I'd like do is put a question mark or "what does that mean?" with a hover or clickable link that says.....   This means, no ball team , cars, schools, logos names, professional photos blah blah blah etc...

I tried searching liquid instructions as well as the forum for similar but couldn't find it (or find what I understood to be similar)  most relate to product images or add to cart buttons etc.  I just want to add it to a text line in my custom liquid files above my text input boxes (custom form as below )

<p>Do not request any text or images that might be copyrighted or trademarked!  some type of ??hover here</p>
or here {% if...xxxx

<p class="line-item-property__field">
<label for="Name">NAME(s) will be in area as on sample unless change requested in additional info box</label>
<input id="Name" type="text" name="properties[Name]">
</p>

Accepted Solution (1)

made4Uo
Shopify Partner
3839 716 1177

This is an accepted solution.

Hi @Bikes-Angel 

 

You can modify your code with the code below. 

<style>
  .hover--info {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 50px;
}

.hover--info:hover p {
  display: block;
}

.hover--info p {
  display: none;
}
</style>
<p>Do not request any text or images that might be copyrighted or trademarked!  some type of ??hover here</p>
<div class="hover--info">
  <span>&#9432</span>
  <p>This means, no ball team , cars, schools, logos names, professional photos</p>
  </div>

<p class="line-item-property__field">
<label for="Name">NAME(s) will be in area as on sample unless change requested in additional info box</label>
<input id="Name" type="text" name="properties[Name]">
</p>

 

 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 2 (2)

made4Uo
Shopify Partner
3839 716 1177

This is an accepted solution.

Hi @Bikes-Angel 

 

You can modify your code with the code below. 

<style>
  .hover--info {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 50px;
}

.hover--info:hover p {
  display: block;
}

.hover--info p {
  display: none;
}
</style>
<p>Do not request any text or images that might be copyrighted or trademarked!  some type of ??hover here</p>
<div class="hover--info">
  <span>&#9432</span>
  <p>This means, no ball team , cars, schools, logos names, professional photos</p>
  </div>

<p class="line-item-property__field">
<label for="Name">NAME(s) will be in area as on sample unless change requested in additional info box</label>
<input id="Name" type="text" name="properties[Name]">
</p>

 

 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Bikes-Angel
Explorer
65 1 23

That is somewhat helpful  Thank you.  I was trying to not take up more space in the form and have it just pop up upon a click or hover of the ?? at the end of the sentance   Technically I could just add all that info into each form since the space is being taken up with a full block containing the i  / hidden info anyway.  But I really appreciate the response.