Displaying changing variables when hovering over text

Question

Using twine2 and Sugarcube 2, relative beginner when it comes to the more complicated stuff (so this  may have been answered already and i didin't understand it)

Basically what i am trying to do is have a small box popup with a description of a character when you hover over their name in the text and then disappear when its gone. I found something close to what i wanted and modified it.

/* 	
Text popout general setup.	
*/
.textpop {position: relative;}
.textpop:hover::after {
    position: absolute;
    left: 100;
    top: 1.25em;
    z-index: 100;
  	background-color: tan;
  	border-style: solid;
	border-width: 3px;
	border-radius: 1em;
  	border-color: white;
	padding: 10px;
}

/* 
Text Popouts	
*/
.johndoe.textpop:hover::after {
       content: $johndoe.desc;
}

I know that variables cant be used to define CSS but i am not sure if there is a viable workaround for this problem.

Answer 1

Put something like this into your CSS:

.hover {
    position: relative;
    display: inline-block;
}

.hover .hoverblock {
    visibility: hidden;
    min-width: 300px;
    background-color: orange;
    color: black;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  	bottom: 100%;
    position: absolute;
    z-index: 1;

}

.hover:hover .hoverblock {
    visibility: visible;
}

And use it like this in the passage:

<div class="hover"><<nobr>>
John Doe
<span class="hoverblock">
$johndoe.desc
</span>
<</nobr>></div>

 

 

Comments

Works perfectly, thanks!

---

Is there a way to make the 'text' that you want to hover over be highlighted, somehow? So you can tell it's something to 'check out'?

---

If you mean emphasis on the John Doe part of the previous example then you could do that by adding extra styling to the .hover CSS selector, which you would possible need to remove in the .hover .hoverblock CSS selector.

The following adds bold to the .hover selector and removes it from the .hover .hoverblock selector.

.hover {
    position: relative;
    display: inline-block;
    font-weight: bold;
}

.hover .hoverblock {
    visibility: hidden;
    min-width: 300px;
    background-color: orange;
    color: black;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  	bottom: 100%;
    position: absolute;
    z-index: 1;
    font-weight: normal;
}

.hover:hover .hoverblock {
    visibility: visible;
}

... obviously you can uses something other than bolding.

---

Ah!~ Thanks :D It worked :) I may use this in a project somewhere haha. Thanks :)

---

Solves an issue I was having with my Harlowe project too. Now I don't have to play with (mouseover:) anymore!