https://www.sportswearhouse.nl/wp-content/plugins/cvb-gateway/assets/js/cvb_pdp_label.js?ver=1.1.15

1class CVBPDPLabel extends HTMLElement {
2  static generateStyle(fontUrl) {
3    return `
4    <style>
5      :host {
6        position: relative;
7        display: inline-flex;
8        align-items: center;
9        cursor: help;
10        font-family: 'Graphik', sans-serif;
11        width: fit-content;
12        justify-content: space-between;
13        padding: 8px 0px 8px 14px;
14        border-radius: 24px;
15        background-image: radial-gradient(circle at 75% 200%, rgb(0, 0, 164) 47%, rgb(237, 243, 255) 47.7%);
16      }
17
18      :host:has(> .hovered) {
19        cursor: default;
20      }
21
22      .prefix {
23        color: #0000A4;
24        font-size: 0.9rem;
25        line-height: 16px;
26        width: max-content;
27      }
28
29      img {
30        margin-left: 12px;
31        margin-top: -2px;
32        height: 16px;
33        object-fit: contain;
34        display: block;
35        padding-left: 12px;
36        padding-right: 12px;
37      }
38
39      .tooltip {
40        visibility: hidden;
41        background-color: #fff;
42        color: #000;
43        text-align: left;
44        padding: 0 12px;
45        border-radius: 6px;
46        border: 1px solid #ccc;
47
48        position: absolute;
49        z-index: 100000001;
50        top: 120%;
51        left: 50%;
52        width: 100%;
53        margin-left: -50%;
54      }
55
56      :host(:hover) .tooltip.hovered {
57        visibility: visible;
58      }
59    </style>
60  `
61  }
62
63  constructor() {
64    super();
65  }
66
67  connectedCallback() {
68    const prefixSpan = document.createElement('span')
69    prefixSpan.classList.add("prefix")
70    prefixSpan.innerText = this.getAttribute('prefix-text');
71
72    const logo = document.createElement('img')
73    logo.src = this.getAttribute('logo-url');
74    logo.alt = this.getAttribute('tooltip-title')
75
76    const tooltip = document.createElement('div')
77    tooltip.classList.add("tooltip")
78    tooltip.innerHTML = `
79      <h3>${this.getAttribute('tooltip-title')}</h3>
80      ${this.getAttribute('tooltip-text')}
81    `;
82
83    this.onclick = function () {
84      tooltip.classList.add("hovered")
85    }
86
87    this.addEventListener("mouseleave", (event) => {
88      tooltip.classList.remove("hovered")
89    });
90
91    const shadow = this.attachShadow({mode: 'open'});
92    shadow.innerHTML = CVBPDPLabel.generateStyle(this.getAttribute('font-url'));
93    shadow.appendChild(prefixSpan);
94    shadow.appendChild(logo);
95    shadow.appendChild(tooltip);
96  }
97}
98
99customElements.define('cvb-pdp-label', CVBPDPLabel);