Updated code Tooltip
tooltipunknown
plain_text
3 years ago
3.1 kB
9
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...