How to float text block when hovering over bullet?

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?

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.

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

1 hour ago, bangank36 said:

Could you share your site url with the use case

Here's my website:

https://www.xystema.com/pricing

password: 061298

I haven't tried it yet but the bullet list are there. I don't know how to start.

@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;
}}

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;
}}

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. 

Try remove top: -30px; in the code I sent & check again