tooltip component

templates/components/accounts/{acctID.int64}/inventory/sync-groups/draft/table/add-listing-button.html.tmpl

@@ -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!"
+		)
+}}