Jump to content

How to create a hidden info box, which appears when you hover over "i" icon

Go to solution Solved by Ziggy,

Recommended Posts

Hi, I have this page which showcases different packages of our software:

https://composites.taniq.com/software-packages

Password: TaniqComposites

We want to give a brief explanation for each of the features listed in the table, the best way to do so would be to have an "i" icon next to each feature where you hover above it, a text box would appear to provide more information. An example is shown below:

Infobox.thumb.png.9c2e06c4eb155891a29fba9e97f498d8.png

Is something like this easily achieved with some custom code?

Link to comment
  • Replies 4
  • Views 239
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

  • Solution

You could try this method:

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

You should be able to tap on mobile, but it's worth a test.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.