https://www.growthbook.io/ logo
#ask-questions
Title
# ask-questions
l

limited-hospital-80763

11/29/2023, 9:06 AM
Hello AB testers! Would anyone have tips on how (if) I can create an experiment of a hover element with visual editor?
r

rhythmic-agent-34208

11/29/2023, 9:06 AM
โญ 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!
a

alert-leather-41230

11/29/2023, 10:25 AM
@limited-hospital-80763 You mean a button on hover? Itโ€™s only double with pure css or js. What would you like to change? ๐Ÿ™‚
l

limited-hospital-80763

11/29/2023, 11:25 AM
@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?
a

alert-leather-41230

11/29/2023, 11:33 AM
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.
l

limited-hospital-80763

11/29/2023, 11:43 AM
Thanks for your advice @alert-leather-41230 ! I'll try the js approach with my dev first
a

alert-leather-41230

11/29/2023, 11:45 AM
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!
Copy code
(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);
l

limited-hospital-80763

11/29/2023, 11:50 AM
Wow thank you for sharing @alert-leather-41230 ! ๐Ÿ™ I'll report back how we manage
๐Ÿ™Œ 1
b

brief-honey-45610

11/29/2023, 2:30 PM
Lovely community support here! Thank you for chiming in, Roy ๐Ÿ™‚ Let us know how it goes, Katharina!
๐Ÿ˜„ 1
i

incalculable-elephant-73095

02/20/2024, 9:00 AM
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?
4 Views