show QRcode on button hover

flamingtop

Is it possible to show a QRCode image on button hover?

Castor

Great question! This is not (yet) possible when hovering, though this is something we are working on. For now, you could use the (Premium) Javascript action to make a QR code appear when clicking on the button. Using javascript you can show a QR code, something like this:

const el = document.createElement("img");
el.src = "(url to QR code file)";
document.body.appendChild(el);

You would have to style the element aswell in order to make it appear the way you want to.

Horace

Castor

Horace

hello. i would like to do the samething. please assist.it shows nothings

const el = document.createElement("img");
el.src = "(https://cdn-images.farfetch-contents.com/16/96/13/97/16961397_34554335_300.jpg)";
document.body.appendChild(el);
------

Jasper

Horace Hey Horace,

Unfortunately Castor is no longer working at Buttonizer, so he will be unable to answer your question.

Nowadays you can change the icon on hover (this wasn't possible when Castor has written his answer). So I would suggest to try this out instead of the custom Javascript you are using above.

What you can do is the following:

Go to the button style settings
Select the Hover state in the Icon section
Change the Icon type to Image
Now upload your QR code to WordPress and select this as your hover icon
Change the size of the hover icon so the QR code is bigger

Let me know if this helps 🙂

Horace

Jasper no. I don't want this. I want the QR code showing beside the icon when I hover the WeChat logo just like the screenshot. I tested with a sport shoes. if the qrcode show inside the button that's so ugly and small. Please help.