0 votes
by (130 points)

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.

1 Answer

+2 votes
by (23.6k points)

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>

 

 

by (130 points)
Works perfectly, thanks!
by (750 points)
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'?
by (159k points)

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.

by (750 points)
Ah!~ Thanks :D It worked :) I may use this in a project somewhere haha. Thanks :)
by (230 points)
Solves an issue I was having with my Harlowe project too. Now I don't have to play with (mouseover:) anymore!
...