Updating another Div from Within a for loop

Authoring Twine
1

Twine Version: 2.10.0
Sugarcube 2.37.3

I’m attempting to create a tooltip-style hover effect for a series of buttons. The buttons are generated by a “for” loop. But I want the tooltip to appear as a variable in a div outside the loop. I want this variable to update based on which button you’re hovering over.

Here’s my code so far:

  .hover-content {
    display: none;
  }

  .hover-target:hover ~ .hover-content {
    display: block;
  }

<<for _x to 0; _x lt 5; _x++>>
	<div class="hover-target">
		<<set $revealedContent to _x>>
		<<capture _x, $revealedContent>>
		<<link _x>>
			<<goto "Page 2">>
		<</link>>
		<</capture>>
	</div>
<</for>>

<div class="hover-content">Content Number $revealedContent</div>

Currently, it always says “Content Number 4”. I’d like it to say “Content Number 2” when I hover over button 2 etc. Is there any way to achieve this in Sugarcube?

2

You can do this:

<<for _x to 0; _x lt 5; _x++>>
	<div class="hover-target">
		<<set $revealedContent to _x>>
		<<capture _x, $revealedContent>>
			<a @onmouseover="'$(\'.hover-content\').text(\'Content Number '+$revealedContent+'\')'" data-passage="Page 2">_x</a>
		<</capture>>
	</div>
<</for>>

<div class="hover-content"></div>