Updated code Tooltip
tooltipunknown
plain_text
3 years ago
3.1 kB
7
Indexable
p.eg_content { margin-top: -15px; margin-left: 26px; } .eg_tooltip{ cursor: pointer; color: #4e616a; } .row.tile > .pdp-tile > .attributes > .shipping { position: relative; } .eg_tooltipCont { position: absolute; top: 84%; left: 0%; background: #fff; color: #696158; z-index: 999; padding: 10px 10px 5px; display: none; border: 3px solid #f9f9f9; } .eg_content:hover + .eg_tooltipCont, .eg_tooltipCont:hover { display: block; } .eg_tooltipCont::before { content: ''; position:absolute; width:20px; left: 40%; height:20px; background: #fff; top:-10px; rotate: 45deg; border: 3px solid #f9f9f9; border-right: none; border-bottom: none; } (function () { try { /* main variables */ var debug = 0; var variation_name = ""; /* all Pure helper functions */ function waitForElement(selector, trigger, delayInterval, delayTimeout) { var interval = setInterval(function () { if ( document && document.querySelector(selector) && document.querySelectorAll(selector).length > 0 ) { clearInterval(interval); trigger(); } }, delayInterval); setTimeout(function () { clearInterval(interval); }, delayTimeout); } /* Variation functions */ var egStr =''+ ' <p class="eg_content"> Easy returns.'+ ' '+ ' <span class="eg_tooltip">Learn More.'+ ' '+ ' <p class="eg_tooltipCont">We want you to love everything you purchase from us - candles, fragrances, home accents, and anything else. If for any reason you don`t, even if you just change your mind, start our self-service return process or simply return your item to any of our'+ ' Yankee Candle stores for a full refund or exchange.'+ ' <a href="https://www.yankeecandle.com/on/demandware.store/Sites-homefragranceus-Site/en_US/Support-Show?cfid=ordering-information#faq-ques-ans-question"><b>Click here for more info</b></a> '+ ' </p>'+ ' </span>'+ ' </p>'; function init() { document.querySelector("#maincontent > div.container.product-detail.product-wrapper.user-selected > div.row.tile > div.pdp-tile > div.attributes > div.shipping > p").insertAdjacentHTML("afterend", egStr); document.querySelector("p.eg_content").insertAdjacentHTML("afterend", eg_tool); } /* Initialize variation */ waitForElement("#maincontent > div.container.product-detail.product-wrapper.user-selected > div.row.tile > div.pdp-tile > div.attributes > div.shipping", init, 50, 15000); } catch (e) { if (debug) console.log(e, "error in Test" + variation_name); } })(); { "files": [ "./variationB/variation.css", "./variationB/variation.js" ], "urls": ["https://www.yankeecandle.com/yankee-candle/candles/"], "inject": "" }
Editor is loading...