Updated code Tooltip

tooltip
 avatar
unknown
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...