tooltip component

2026-01-29 18:52:54 -07:00
parent 9ae8745b12
commit 12ba219ef9
4 changed files with 167 additions and 8 deletions
@@ -1,7 +1,7 @@
 {{- $acctID := .PathParams.acctID }}


-{{- component "button"
+{{- $button := component "button"
 	"HXPost" (printf "/api/accounts/%d/inventory/sync-groups/draft/listings" $acctID)
 	"HXTarget" "#accounts-acct-id-inventory-sync-groups-draft-table"
 	"HXSwap" "none"
@@ -14,3 +14,24 @@
 			send rowUpdated to the first <tbody/> in #accounts-acct-id-inventory-sync-groups-draft-table
 	`
 }}
+{{/* $button */}}
+
+{{-
+	component "tutorial-tooltip"
+		"AnchorTag" 				"div"
+		"AnchorID" 					"sync-groups-draft-table-add-listing-button"
+		"AnchorClickedEventName" 	"anchorClicked"
+		"AnchorContent" 			$button
+
+		"AnchorClass" 				""
+		"AnchorStyle"				"display: inline;"
+
+		"PopoverID" 				"add-listing-popover"
+		"PopoverContentIDPrefix" 	"add-listing-popover-content"
+		"PopoverContents" 			(
+			newHTMLSlice
+				"Click to add a listing"
+				"You need at least two to create a sync group!"
+				"Keep adding listing until done!"
+		)
+}}
@@ -0,0 +1,103 @@
+{{/* anchor props */}}
+{{/* required: .AnchorTag, .AnchorID, .AnchorClickedEventName, .AnchorContent */}}
+{{/* optional: .AnchorClass, .AnchorStyle */}}
+{{/* popover props */}}
+{{/* required: .PopoverID, PopoverContentIDPrefix, .PopoverContents: [](string|HTML) */}}
+{{/* optional: .PopoverStyle */}}
+
+{{- $dot := . }}
+{{- $anchorTag := or .AnchorTag "div" }}
+{{printf "<%s" $anchorTag | rawHTML}}
+	{{if .AnchorID}}id="{{.AnchorID}}"{{end}}
+	{{if .AnchorClass}}class="{{.AnchorClass}}"{{end}}
+	style="anchor-name: --{{.AnchorID}}; {{.AnchorStyle}}"
+	_="
+		on click
+			set popover to the #{{.PopoverID}}
+			send {{.AnchorClickedEventName}} to #{{.PopoverID}}
+	"
+{{ rawHTML ">" }}
+	{{ .AnchorContent }}
+{{printf "</%s>" $anchorTag | rawHTML}}
+<div
+	popover="manual"
+	id={{.PopoverID}}
+	class="
+		max-w-[80vw]
+		p-[1em]
+		mt-[1.5em]
+
+		bg-card
+		animate-pulse
+		border-[1px] border-sidebar-border rounded-lg
+		cursor-default
+
+		open:grid
+
+		{{.AnchorClass}}
+	"
+	{{/* TODO: move this style into the class, if possible */}}
+	style="
+		position: fixed;
+		position-anchor: --{{.AnchorID}};
+		position-area: bottom;
+
+		grid-template-columns: 1fr max-content;
+		grid-template-rows: max-content;
+		gap: 1em;
+
+		box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);
+
+		{{.PopoverStyle}}
+	"
+	hx-preserve
+	_="
+		init
+			call me.showPopover()
+			set :anchorClicks to 0
+
+		on click
+			event.preventDefault()
+
+		on {{.AnchorClickedEventName}}
+			set :anchorClicks to :anchorClicks + 1
+		{{- range $i, $content := .PopoverContents }}
+			{{- $numClicks := addInt $i 1 }}
+			{{- $idToHide := printf "%s-%d" $dot.PopoverContentIDPrefix $i }}
+			{{- $idToShow := printf "%s-%d" $dot.PopoverContentIDPrefix (addInt $i 1) }}
+			{{- $maxIndex := subInt (len $dot.PopoverContents) 1 }}
+
+			{{- if lt $i $maxIndex }}
+			if :anchorClicks is {{$numClicks}} then
+				hide #{{$idToHide}}
+				show #{{$idToShow}}
+			else
+			{{- else if eq $i $maxIndex }}
+			if :anchorClicks is {{$numClicks}} then
+				call me.hidePopover()
+			end
+			{{- end }}
+		{{- end }}
+	"
+>
+{{- range $i, $content := .PopoverContents }}
+	<span id="{{$dot.PopoverContentIDPrefix}}-{{$i}}" style="grid-column: 1; {{if gt $i 0}}display: none;{{end}}">
+		{{$content}}
+	</span>
+{{- end }}
+	<button
+		class="cursor-pointer"
+		style="
+			grid-column: 2;
+			font-size: 2em;
+			line-height: 0.5em;
+		"
+		_="
+			on click
+				set parent to the closest #{{.PopoverID}}
+				call parent.hidePopover()
+		"
+	>
+		&#x00d7;
+	</button>
+</div>