Showing additional info in a popup is a great way to give visitors more information without cluttering your page. It’s also an effective way to make sure your user experience is as smooth as possible. But did you know that you can create custom text-only popup using CSS? That’s right—with just a few lines of code, you can add unique and personalized tooltips to your site.
– – –
⭐ Learn more Squarespace CSS basics in my free class: https://insidethesquare.co/learn
– – –
Often called a tooltip, you can add this simple text popup to any version of Squarespace and any subscription level too!
This is only for text. We aren’t adding images or forms or anything else to this popup, just a simple line of text that shows up on a hover.
If you want to have a popup form, check out this tutorial: https://insidethesquare.co/squarespace-tutorials/lightbox-form-styles
If you want to have a lot of content in that popup like images and more, you’ll need an advanced plugin. I recommend using the one from Sqsp themes. Here is my affiliate link:
https://transactions.sendowl.com/stores/9483/187099
Step 1: Add the popup
The first step is to add the HTML code that will tell Squarespace what text it should show on the page and what the popup should be. You’ll want to insert this code into the section of your website where you’d like the text placed. The full code is on my blog at https://insidethesquare.co/squarespace-tutorials/text-popup to copy it from my blog.
This code creates two new elements on your site. Text is displayed on your site and will trigger the popup when hovered over by the mouse.
Step 2: Add CSS Styling
Once you’ve added the HTML code for your popup text, it’s time to style it with CSS so that it looks great! To do this, head over to Design → Custom CSS and paste in the following code snippet:
.popup {
visibility:hidden;
/*style of the popup*/
padding: 1rem;
background-color: #e5f5f6;
border: 1px solid #ccc;
box-shadow: 5px 5px 15px #ccc;
border-radius: 6px;
opacity:.9;
/*placement of the popup*/
display: inline-block;
position:relative;
top:1rem;
left:-5%
}
.text:hover .popup { visibility:visible;
}
You’ll want to adjust this code so it looks great with your own website. You can change the background color of the popup, the padding, the opacity, and even change the location of the popup. You can also apply additional styling elements like a border or shadow.
Step 3: Publish Your Changes
Once you’ve added both the HTML and CSS for your custom tooltip, publish your changes and check out how it looks on your live site!
– – –
⭐ Learn more Squarespace CSS basics in my free class: https://insidethesquare.co/learn
– – –
🤩 Download over 100+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css
– – –
⭐ NEW: Download a list of my top 7 Squarespace tutorials: https://insidethesquare.co/top7
– – –
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
– – –
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → https://www.instagram.com/thinkinsidethesquare
👍 FACEBOOK → https://business.facebook.com/insidethesquare
📌 PINTEREST → https://www.pinterest.com/insidethesquare
– – –
The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
