SvelteとJavaScriptを使用してシンプルで動的なツールチップを作成する

出版日: 2024年6月19日

背景

ウェブページにすべての情報を表示できない場合、ツールチップを使用して追加情報を必要に応じて表示するのが便利です。

このような情報ボタンがあります：

情報ボタンにホバーすると、表示される情報が見えます

情報ボタンにホバーすると情報が表示されることがわかります。ホバーすると情報が利用可能になります。

では、JavaScriptとSvelteを使用してツールチップを作成する方法を見てみましょう。

目的

このブログ記事では、JavaScriptとSvelteを使用して、マウスの位置に応じて位置が調整される最小限の動的ツールチップを作成します。

ツールチップはHTMLもサポートする必要があります。ツールチップ内にタイトルや画像などのリッチコンテンツを表示したいからです。

方法

まず、ホバー時にツールチップを表示したい要素を追加します：

<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>

長いコードで、そのほとんどはボイラープレートですので、コードの3つの重要な部分に焦点を当てたいと思います。

1. 情報要素

情報要素はツールチップをトリガーする要素です。私たちの例では、情報ボタンでした。

これらの要素にはtooltip属性が必要です。この属性の値は、この要素にホバーしたときにツールチップ内に表示したいHTML要素でなければなりません。

// 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>

2. イベントリスナー

すべての情報要素にtooltip属性を割り当てると、コンポーネントがマウントされたときにそれらを識別するのに役立ちます。

ツールチップ属性を持つすべての要素が識別されると、mouseenterイベントをリッスンし、ツールチップを表示します。このイベントはまた、ツールチップ属性の値をツールチップのHTMLに割り当てます。

マウスが情報要素を離れると、ツールチップは非表示にする必要があります。

ツールチップの可視性を制御する方法は次のとおりです：

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 = '';
		});
	}
});

3. ツールチップの位置決め

情報要素にホバーしたときにツールチップを表示/非表示にできるようになったので、次はツールチップの位置を決定する必要があります。

以下のコードはそれを実現するためのものです：

// 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';
}