tooltip component

templates/pages/accounts/{acctID.int64}/index.html.tmpl

@@ -60,19 +60,38 @@
 >
 	<details class="flex flex-col items-stretch">
 		<summary class="list-none cursor-pointer self-center">
-			<h2
+			{{-
+				component "tutorial-tooltip"
+					"AnchorTag" 				"h2"
+					"AnchorID" 					"shops-button"
+					"AnchorClickedEventName" 	"anchorClicked"
+					"AnchorContent" 			"Shops"
+
+					"AnchorClass" 				"bg-card my-[0.5em] px-[2em] py-[0.5em] rounded-lg"
+
+					"PopoverID" 				"shops-popover"
+					"PopoverContentIDPrefix" 	"shops-popover-content"
+					"PopoverContents" 			(
+						newHTMLSlice
+							"Click <span class=\"font-bold italic\">Shops</span> to display all shops and platforms available"
+							"Click <span class=\"font-bold italic\">Shops</span> to hide them again"
+							"There you go!"
+					)
+			}}
+
+
+			<!--h2
 				class="bg-card my-[0.5em] px-[2em] py-[0.5em] rounded-lg"
 				style="anchor-name: --shops-button;"
 				_="
 					on click
 						set popover to the #shops-popover
-						-- popover.hidePopover()
 						send shopsButtonClicked to #shops-popover
 				"
 			>
 				Shops
-			</h2>
-			<div
+			</h2-->
+			<!--div
 				popover="manual"
 				id="shops-popover"
 				class="
@@ -100,7 +119,6 @@
 				"
 				_="
 					init
-						-- wait 1s
 						call me.showPopover()
 						set :shopButtonClicks to 0
 
@@ -144,7 +162,7 @@
 				>
 					&#x00d7;
 				</button>
-			</div>
+			</div-->
 		</summary>
 
 		<ul class="list-none" hx-swap="morph">