Hover over image - text (image title) tooltip that follows cursor

[Iman Whitfield]

Hi there, I would like to create a custom tooltip when you hover over the images on my website. So your cursor changes into the 'image title'. So you won't see the cursor when you hover over the images - just text.

The text will follow your mouse.

Font-family: Helvetica
Font-weight: bold
Font-size: 12px

Only on the desktop version.

website: www.imanwhitfield.com

How to do this?
I'm not a web designer so as simple as possible please :)

(Kind of like this: https://www.cssscript.com/demo/tooltip-follow-cursor/ but then without the black box and without the cursor.)

[Richard]

Dear @Iman-Whitfield

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