Jump to content

How to float text block when hovering over bullet?

Recommended Posts

  • 2 years later...
On 9/4/2019 at 2:06 AM, ss_qstns said:

If I had a bullet list like the following:

  • Product A
  • Product B
  • Product C
  • Product D

Is there a way, that if a visitor hovers with their mouse or the touch of their finger on a mobile device will popup a floating window with additional text description?

Hi @qstns, were you able to find solution with this? I have the save issue.

Link to comment
27 minutes ago, Ciodensky said:

Hi @qstns, were you able to find solution with this? I have the save issue.

Could you share your site url with the use case

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

@Ciodensky You can add this CSS

/* Mender First Li */
div#block-yui_3_17_2_1_1636110200873_17984 ul {
li:nth-child(1):after {
    content: "show content on hover first li";
    display: block;
    position: absolute;
    z-index: 999;
    background-color: rgba(0,0,0,0.75);
    top: -30px;
    color: white;
    border-radius: 5px;
    padding: 5px 10px;
    opacity: 0;
}
li:nth-child(1) {
    position: relative;
}
li:nth-child(1):hover:after {
    opacity: 1;
}}

image.thumb.png.9aeae52f090a297dce740f4ed8ab4df2.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 11/10/2021 at 8:45 PM, tuanphan said:

@Ciodensky You can add this CSS

/* Mender First Li */
div#block-yui_3_17_2_1_1636110200873_17984 ul {
li:nth-child(1):after {
    content: "show content on hover first li";
    display: block;
    position: absolute;
    z-index: 999;
    background-color: rgba(0,0,0,0.75);
    top: -30px;
    color: white;
    border-radius: 5px;
    padding: 5px 10px;
    opacity: 0;
}
li:nth-child(1) {
    position: relative;
}
li:nth-child(1):hover:after {
    opacity: 1;
}}

image.thumb.png.9aeae52f090a297dce740f4ed8ab4df2.png

Hi @tuanphan, Very nice! thank you. But I just want to clarify few things.

I changed the line number to 5 for this clarification which when I hover the floating text appear (see screenshot)—no issue with this.

But when I hover on the line 3 and 4, the floating text also appears. Looks like I missed something here. But I am no coder.

Need some more help here @tuanphan. Thank you. 

Screen Shot 2021-11-13 at 2.48.53 PM.png

Screen Shot 2021-11-13 at 2.55.38 PM.png

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.