Hello AB testers! Would anyone have tips on how (if) I can create an experiment of a hover element with visual editor?

⭐ Our official support hours are 6:30am - 5pm Pacific Time, Monday through Friday. You may occasionally hear from us outside of these hours. Your support request has been logged in our system. Our support team will get back to you very soon!

@limited-hospital-80763 You mean a button on hover? It’s only double with pure css or js. What would you like to change? 🙂

@alert-leather-41230 "just" a note/ directions on hover. my goal is to add a "?" next to text on my product page and then add a hover element on it. on hover it would display a text box. Which one would you recommend to try with visual editor: css or js?

That would be simple but you need some code skills. You need to add some extra info with JS to recognize the element and add the tooltip using css if it is only text based. If you would like to have more design than i prefer to add a html element and show/hide it when a user hover over the Questionmark.

Thanks for your advice @alert-leather-41230 ! I'll try the js approach with my dev first

You’re welcome @limited-hospital-80763. This is someting I wrote ealier for a client. You dev can make it work or use it as inspiration 😉 Goodluck!

(function(doc, $) {


    function variantStyle() {
        var style =
            '.tooltip{padding:20px 10px 20px 5px;}'+
            '.tooltip:before{cursor:help;margin-top: -3px; font-style:normal; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 1.4rem; line-height: 1.35;  transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg);  color: #0032a0; content: \'\\f13f\'; font-family: \'MagentoIcons\'; vertical-align: middle; display: inline-block; font-weight: 400; overflow: hidden; speak: none; text-align: center;}'+
            '.tooltip:hover .tooltiptext {visibility: visible;}'+
            '.tooltip .tooltiptext {font-weight:normal; opacity: 0; transition: opacity 0.2s; visibility: hidden; width: 240px;background-color: rgba(0, 0, 0, 0.8);color: #fff;border-radius: 6px;position: absolute;z-index: 1;top: 60%;left: 45%;margin-left: -120px;font-style: normal;text-align: left;padding: 25px;font-size: 14px;}'+
            '.tooltip .tooltiptext a{color:#fff; font-weight:normal;}'+
            '.tooltip:hover .tooltiptext { opacity: 1;}'+
            '@media (max-width: 1023px) {'+
            '.tooltip .tooltiptext{width:220px; top: 60%; left: 120px; font-weight:normal;}'+
            '.tooltip .tooltiptext:after{left: 86%;}'+
            '}';
        $('head').append('<style>' + style + '</style>');
    }

    function domManipulation() {

        var insertHtml = '<span class="tooltip" data-track-id="hoverIcon"><span class="tooltiptext">text</span></span></span></div>';

        $('.btn').append(insertHtml);

    }

    $(doc).ready(function(){
        variantStyle();
        domManipulation();
    });

})(document, jQuery);

Wow thank you for sharing @alert-leather-41230 ! 🙏 I'll report back how we manage

Lovely community support here! Thank you for chiming in, Roy 🙂 Let us know how it goes, Katharina!

Hi. Here are some tips on creating different versions with jQuery on hover, but I have another question on how to trigger the distribution only when users are hovering the specific element? For example, for group A, it will be a link, and for B, it will be a popup. How to set up this trigger properly?