If it helps you, here is the tooltip.js in your example for you:
function initTooltip() {
const tooltips = Array.from(document.querySelectorAll('[data-tooltip-container]'));
tooltips.map(tooltip => {
tooltip.addEventListener('mouseover', handleMouseOver);
})
function handleMouseOver() {
const tooltipbox = createTooltipBox(this);
handleMouseMove.tooltipbox = tooltipbox;
this.addEventListener('mousemove', handleMouseMove);
handleMouseLeave.tooltipbox = tooltipbox;
handleMouseLeave.element = this;
this.addEventListener('mouseleave', handleMouseLeave);
}
const handleMouseLeave = {
handleEvent() {
this.tooltipbox.remove();
this.element.removeEventListener('mousemove', handleMouseMove);
this.element.removeEventListener('mouseleave', handleMouseLeave);
}
}
const handleMouseMove = {
handleEvent(e) {
this.tooltipbox.style.top = e.clientY + 25 + 'px';
this.tooltipbox.style.left = e.clientX + 13 +'px';
}
}
function createTooltipBox(el) {
let tooltip = document.createElement('div');
tooltip.innerText = el.getAttribute('data-tooltip-label');
tooltip.classList.add('tooltip');
document.body.appendChild(tooltip);
return tooltip;
}
}
initTooltip();
Creating a box, <div>, that appears when hovering over the Image <img> is a simple step. Here are some links that may help you:
https://www.khanacademy.org/computing/computer-programming/html-css
https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools
https://www.w3schools.com/howto/howto_css_display_element_hover.asp
However the next step:
You will need the Image Title information which is stored as an Attribute to the Image element
This information will be used to fill the Tooltip with text.
These Links may be of help to you:
https://www.tutorialrepublic.com/faq/how-to-get-the-data-id-attribute-of-an-element-using-jquery.php#:~:text=Answer%3A Use the jQuery attr,attribute of an HTML element.
https://laytheme.com/documentation.html#custom-javascript
https://css-tricks.com/a-complete-guide-to-data-attributes/
Sorry that i cannot be of more help right now Iman but i hope this aids either you or someone helping :)
Best wishes & thank you for using Lay Theme
Richard
