feat: Webサイトのツールチップをクリック式のモーダルに変更 (#202)

Author: 3w36zj6

website/src/components/ui/Tooltip.tsx

@@ -1,5 +1,5 @@
 import type { FC } from "hono/jsx";
-import { HelpCircleIcon } from "../icons";
+import { CloseIcon, HelpCircleIcon } from "../icons";
 import { HtmlContent } from "./HtmlContent";
 
 type TooltipProps = {
@@ -85,43 +85,81 @@ const tooltipContent: Record<
 export const Tooltip: FC<TooltipProps> = ({ kind }) => {
 	const content = tooltipContent[kind];
 
-	if (content.isShowLabel) {
-		return (
+	return (
+		<div
+			className={
+				content.isShowLabel
+					? `tooltip-context px-2 py-1 ${content.bgColor} ${content.textColor} rounded-md text-xs font-medium flex items-center`
+					: "tooltip-context relative inline-flex"
+			}
+			{...{ "x-data": "{ helpOpen: false }" }}
+		>
+			{content.isShowLabel && (
+				<span class="text-xs font-medium mr-1">{content.label}</span>
+			)}
+
+			<button
+				type="button"
+				class="w-4 h-4 hover:bg-black/10 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
+				aria-label={`${content.label}の詳細情報を表示`}
+				tabindex={0}
+				{...{ "x-on:click": "helpOpen = true" }}
+				{...{ "x-on:keydown.enter": "helpOpen = true" }}
+				{...{ "x-on:keydown.space": "helpOpen = true" }}
+			>
+				<HelpCircleIcon />
+			</button>
+
 			<div
-				className={`tooltip-context px-2 py-1 ${content.bgColor} ${content.textColor} rounded-md text-xs font-medium flex items-center`}
+				{...{ "x-show": "helpOpen" }}
+				class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-start justify-center pt-16"
+				{...{ "x-cloak": "" }}
+				{...{ "x-transition:enter": "ease-out duration-300" }}
+				{...{ "x-transition:enter-start": "opacity-0" }}
+				{...{ "x-transition:enter-end": "opacity-100" }}
+				{...{ "x-transition:leave": "ease-in duration-200" }}
+				{...{ "x-transition:leave-start": "opacity-100" }}
+				{...{ "x-transition:leave-end": "opacity-0" }}
+				{...{ "x-on:click": "helpOpen = false" }}
+				{...{ "x-on:keydown.escape": "helpOpen = false" }}
 			>
-				<span class="text-xs font-medium mr-1">{content.label}</span>
-				<div class="relative group">
-					<div class="w-4 h-4">
-						<HelpCircleIcon />
+				<div
+					class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4"
+					{...{ "x-on:click.stop": "" }}
+					{...{ "x-transition:enter": "ease-out duration-300" }}
+					{...{ "x-transition:enter-start": "opacity-0 scale-95" }}
+					{...{ "x-transition:enter-end": "opacity-100 scale-100" }}
+					{...{ "x-transition:leave": "ease-in duration-200" }}
+					{...{ "x-transition:leave-start": "opacity-100 scale-100" }}
+					{...{ "x-transition:leave-end": "opacity-0 scale-95" }}
+				>
+					<div class="flex justify-between items-center p-4 border-b border-gray-200">
+						<div
+							class={`px-3 py-1 ${content.bgColor} ${content.textColor} rounded-md text-sm font-medium`}
+						>
+							{content.label}
+						</div>
+						<button
+							type="button"
+							class="text-gray-400 hover:text-gray-600 cursor-pointer"
+							tabindex={0}
+							{...{ "x-on:click": "helpOpen = false" }}
+							{...{ "x-on:keydown.enter": "helpOpen = false" }}
+							{...{ "x-on:keydown.space": "helpOpen = false" }}
+							aria-label="閉じる"
+						>
+							<div class="w-6 h-6">
+								<CloseIcon />
+							</div>
+						</button>
 					</div>
-					<div
-						role="tooltip"
-						tabIndex={-1}
-						class="absolute invisible opacity-0 group-hover:visible group-hover:opacity-100
-                  transition-opacity duration-200 bg-gray-900 text-white p-2 rounded shadow-lg
-                  text-xs z-50 top-full mt-1 -left-4 w-64"
-					>
-						<HtmlContent html={content.desc} />
+					<div class="p-4">
+						<div class="text-sm font-normal text-gray-700">
+							<HtmlContent html={content.desc} />
+						</div>
 					</div>
 				</div>
 			</div>
-		);
-	}
-	return (
-		<div class="tooltip-context relative group inline-flex">
-			<div class="w-4 h-4">
-				<HelpCircleIcon />
-			</div>
-			<div
-				role="tooltip"
-				tabIndex={-1}
-				class="absolute invisible opacity-0 group-hover:visible group-hover:opacity-100
-                transition-opacity duration-200 bg-gray-900 text-white p-2 rounded shadow-lg
-                text-xs z-50 top-full mt-1 -left-4 w-64"
-			>
-				<HtmlContent html={content.desc} />
-			</div>
 		</div>
 	);
 };