How can I make hover over a combination and obtain text? [SOLVED]

[monicaamb]

I would like that when I make hover over a combination of my products, I obtain the name of the combination. For example:

Red, Green... So the client knows what he is buying:

Edited November 20, 2022 by monicaamb (see edit history)

[endriu107]

It is hard to help if we do not see your store, please share url.

[JBW]

In classic theme thats done by html title attribute, might be missing in your theme. If you want to have a more prominent popup you have to use javascript or use a module like my "Attribute price and availability display module" (requires the title attribute to work properly)

[ps8modules]

5 hours ago, JBW said:

In classic theme thats done by html title attribute, might be missing in your theme. If you want to have a more prominent popup you have to use javascript or use a module like my "Attribute price and availability display module" (requires the title attribute to work properly)

And why don't you please advise how to edit it in the template? After all, it's that simple and just add alt="".

Everyone wants to pay that much unchristian money for 20 words in a template.

The forum is mainly about free help and not as commercial ads!

Edited November 20, 2022 by 4you.software (see edit history)

[monicaamb]

On 11/19/2022 at 11:20 AM, endriu107 said:

It is hard to help if we do not see your store, please share url.

https://raylupaper.com/

https://raylupaper.com/es/agendas-escolares-2022-2023/42-605-agenda-escolar-campus-a5-curso-2022-2023-dia-por-pagina-8436604541670.html#/4-estilo_agendas-azul_university

Edited November 20, 2022 by monicaamb (see edit history)

[endriu107]

In custom.css file change this:

.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

to this:

.sr-only {
    border: 1px solid #aaa;
    clip: unset;
    height: auto;
    margin: -1px;
    overflow: hidden;
    padding: 4px;
    position: absolute;
    width: 128px;
    text-align: center;
    top: -35px;
    left: -50%;
    background: #fff;
    display: none;
}

and below add this:

span.color.texture:hover .sr-only {
    display: block;
}

 

[monicaamb]

3 hours ago, 4you.software said:

And why don't you please advise how to edit it in the template? After all, it's that simple and just add alt="".

Everyone wants to pay that much unchristian money for 20 words in a template.

The forum is mainly about free help and not as commercial ads!

Thank you very much, you are totally right.

I tried to put alt="" in product-variants.tpl but I am not sure where I must put it. I will try also what endriu107 advises me.

I attach you the archive.

Thank you in advance.

product-variants.tpl

Edited November 20, 2022 by monicaamb (see edit history)

[monicaamb]

6 minutes ago, monicaamb said:

Thank you very much, you are totally right.

I tried to put alt="" in product-variants.tpl but I am not sure where I must put it. I will try also what endriu107 advises me.

I attach you the archive.

Thank you in advance.

product-variants.tpl 3.26 kB · 0 downloads

It is solved now. Thank you very much for your support.

This forum needs people as you!

Edited November 20, 2022 by monicaamb (see edit history)

[monicaamb]

11 minutes ago, endriu107 said:

In custom.css file change this:

.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

to this:

.sr-only {
    border: 1px solid #aaa;
    clip: unset;
    height: auto;
    margin: -1px;
    overflow: hidden;
    padding: 4px;
    position: absolute;
    width: 128px;
    text-align: center;
    top: -35px;
    left: -50%;
    background: #fff;
    display: none;
}

and below add this:

span.color.texture:hover .sr-only {
    display: block;
}

 

That's work. Thank you so much, you fix my problem!!!

[2grosiek7]

Hello @endriu107 may I ask you also for a help on the

 

Kindly thank you in advance!

Edited February 16, 2023 by 2grosiek7 (see edit history)