Dear Sir,
Good day to you!
I am trying to add individual tooltips to each list item within the pricing table on the following page:
https://skysolmedia.com/erp-solutions/#table
Unfortunately, the XStore tooltip option applies the tooltip to the entire block rather than individual list elements.
To work around this, I added custom HTML and JavaScript for each list item using the code below:
<span style=”border-bottom: 1px dotted; cursor: help; position: relative;”
title=”Power And Predictive Dialing Power And Predictive Dialing Power And Predictive Dialing Power And Predictive Dialing”
onmouseover=”this.setAttribute(‘data-title’, this.title); this.title=”;”
onmouseout=”this.title=this.getAttribute(‘data-title’); this.removeAttribute(‘data-title’);”
onmousemove=”const t=this.getAttribute(‘data-title’);
if(!document.getElementById(‘custom-tooltip’)){
let d=document.createElement(‘div’);
d.id=’custom-tooltip’;
d.style.cssText=’position:absolute;background:#fff;color:#000;padding:4px 8px;border:1px solid #ccc;border-radius:4px;white-space:nowrap;z-index:1000;font-size:12px;box-shadow:0 2px 6px rgba(0,0,0,0.1);’;
let tooltipText = t.split(‘ ‘);
let lines = ”;
let line = ”;
tooltipText.forEach((word, index) => {
line += word + ‘ ‘;
if ((index + 1) % 5 === 0 || index === tooltipText.length – 1) {
lines += line.trim() + ‘<br>’;
line = ”;
}
});
d.innerHTML = lines.trim();
document.body.appendChild(d);
}
let tt=document.getElementById(‘custom-tooltip’);
tt.style.top=(event.pageY+15)+’px’;
tt.style.left=(event.pageX+15)+’px’;
tt.innerHTML=lines.trim();”
onmouseleave=”let tt=document.getElementById(‘custom-tooltip’);if(tt)tt.remove();”>
Power And Predictive Dialing
</span>
This solution works, but the code is too heavy for each list item and could slow down the page or make maintenance more difficult. I’m looking for a more efficient and lightweight way to implement individual tooltips for each list item in the pricing table.
Could you please advise the best way to achieve this within XStore (or Elementor) without using excessive inline JavaScript?
Thank you.
