👍 イベントIDのコピーボタンにツールチップを追加

code4fukui · Feb 25, 2024 · 003648b · 003648b
1 parent 2048005
commit 003648b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/islands/CopyToClipboard.tsx b/islands/CopyToClipboard.tsx
@@ -1,12 +1,13 @@
 export default function CopyToClipboard(
- props: { body: string },
+ props: { body: string; tooltipText: string },
 ) {
  const copyToClipboard = async () => {
  await navigator.clipboard.writeText(props.body);
  };
  return (
  <button
- class="w-8 h-8 grid place-content-center fill-gray-500"
+ class="w-8 h-8 grid place-content-center fill-gray-500 tooltip"
+ data-tooltip={props.tooltipText}
  onClick={copyToClipboard}
  >
  <svg

diff --git a/routes/event/[hash].tsx b/routes/event/[hash].tsx
@@ -32,7 +32,10 @@ export default function Event(event: PageProps<EventItem>) {
  <section>
  <h2 class="ev-title flex">
  {item.title}
- <CopyToClipboard body={item.hash} />
+ <CopyToClipboard
+ body={item.hash}
+ tooltipText="イベントIDをコピー"
+ />
  </h2>
  <img
  class="w-full h-fit object-cover object-center bg-gray-300"

diff --git a/static/styles.css b/static/styles.css
@@ -2,6 +2,22 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+ .tooltip {
+ @apply relative;
+ }
+ .tooltip::before {
+ @apply content-[attr(data-tooltip)] absolute whitespace-nowrap bg-gray-700 text-center py-1 px-2 z-10 opacity-0 transition-opacity -top-8 left-0 rounded-md text-xs invisible text-white
+ }
+ .tooltip::after {
+ @apply content-[""] absolute -top-2 left-1/2 border-8 border-solid opacity-0 transition-opacity border-transparent border-t-gray-700 invisible
+ }
+
+ .tooltip:hover::before, .tooltip:hover::after {
+ @apply opacity-100 visible
+ }
+}
+
 @layer components {
  .ev-button {
  @apply w-fit mx-auto border-solid border-2 border-orange-500 px-4 py-2 rounded-full bg-white font-bold text-orange-500 transition-colors