Create A Simple and Dynamic Tooltip With Svelte and JavaScript

<Info size={50} color="#0ea5e9" />

<script>
// OnMount is needed to find all tooltips once the component is mounted
import { onMount } from 'svelte';

// info: the tooltip DOM element (info window)
// container: main container  DOM element in the page
// innerWidth: window innerWidth. Use to calculate the location of info window
// innerHeight: window innerHeight. Use to calculate the location of info window
let info, container, innerWidth, innerHeight;

// showInfo: Used to control whether to show an info
$: showInfo = false;

// Function that controls the location of tooltip based on mouse location
function handleMouseMove(event) {

	// Get mouse location
	let x = event.clientX;
	let y = event.clientY;

	// Get container location
	let rect = container.getBoundingClientRect();

	// If mouse is in the top half of the screen, set its 'top' style, otherwise none
	info.style.top = y < innerHeight / 2 ? y - rect.top + 10 + 'px' : '';

	// If mouse is in the bottom half of the screen, set its 'bottom' style, otherwise none
	info.style.bottom = y < innerHeight / 2 ? '' : rect.bottom - y + 10 + 'px';

	// If mouse is in the left half of the screen, set its 'left' style, otherwise none
	info.style.left = x < innerWidth / 2 ? x - rect.left + 10 + 'px' : '';

	// If mouse is in the left right of the screen, set its 'right' style, otherwise none
	info.style.right = x < innerWidth / 2 ? '' : rect.right - x + 10 + 'px';
}

onMount(() => {

	// Get all elements which require showing a tooltip when hovered
	let tooltips = document.querySelectorAll('[tooltip]');

	for (const element of Array.from(tooltips)) {

		// When hovered, show tooltip
		element.addEventListener('mouseenter', () => {
			showInfo = true;
			info.innerHTML = element.getAttribute('tooltip');
		});

		// When hover is gone, hide the tooltip element
		element.addEventListener('mouseleave', () => {
			showInfo = false;
			info.innerHTML = '';
		});
	}
});

</script>

// Get innerWidth and  innerHeight by binding to window
// Listen to mousemove on the window
<svelte:window bind:innerWidth bind:innerHeight on:mousemove={(e) => handleMouseMove(e)} />

// Overall Container. Bind to container variable.
// This is used to adjust the location of tooltip
<div class="flex gap-4 flex-col relative" bind:this={container}>

	<!-- Tooltip element. It's contents are only assigned when the user hovers over an info button -->
		<div bind:this={info}
		class={`z-50 bg-white px-4  max-w-[500px] py-2 flex absolute rounded overflow-hidden shadow-xl hidden`}></div>

	<!-- Info button. This triggers the tooltip -->
	<div class="inline-block"
		tooltip="<p class='font-bold'>Thanks for checking out this tooltip. Much appreciated.</p>">
		<Info size={50} color="#0ea5e9" />
	</div>
</div>

// Info button. This triggers the tooltip
<div class="inline-block"
	tooltip="<p class='font-bold'>Thanks for checking out this tooltip. Much appreciated.</p>">
	<Info size={50} color="#0ea5e9" />
</div>

onMount(() => {

	// Get all elements which require showing a tooltip when hovered
	let tooltips = document.querySelectorAll('[tooltip]');

	for (const element of Array.from(tooltips)) {

		// When hovered, show tooltip
		element.addEventListener('mouseenter', () => {
			showInfo = true;
			info.innerHTML = element.getAttribute('tooltip');
		});

		// When hover is gone, hide the tooltip element
		element.addEventListener('mouseleave', () => {
			showInfo = false;
			info.innerHTML = '';
		});
	}
});

// Function that controls the location of tooltip based on mouse location
function handleMouseMove(event) {

	// Get mouse location
	let x = event.clientX;
	let y = event.clientY;

	// Get container location
	let rect = container.getBoundingClientRect();

	// If mouse is in the top half of the screen, set its 'top' style, otherwise none
	info.style.top = y < innerHeight / 2 ? y - rect.top + 10 + 'px' : '';

	// If mouse is in the bottom half of the screen, set its 'bottom' style, otherwise none
	info.style.bottom = y < innerHeight / 2 ? '' : rect.bottom - y + 10 + 'px';

	// If mouse is in the left half of the screen, set its 'left' style, otherwise none
	info.style.left = x < innerWidth / 2 ? x - rect.left + 10 + 'px' : '';

	// If mouse is in the left right of the screen, set its 'right' style, otherwise none
	info.style.right = x < innerWidth / 2 ? '' : rect.right - x + 10 + 'px';
}