get ready for a slapdash as hell tutorial.
So you want hovertext for your TTRPG because Twine's just a tool.
It's mainly for gamedev but it's also a very easy linking hypertext program.
This is not going to be a CSS tutorial as I'm not good enough for that, this is gonna be how to hack together shit.
I'm using Sugarcube, which lets you easily throw in CSS via hitting Edit Story Stylesheet (Pic 1).
Then I slap in the following CSS:
#ui-bar {
display: none;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
I plan on fiddling with this code to like, give it a lil gold outline. If I recall that's just like border-color: [gold hex color here]. or something like that.
anyway.
Once that CSS is in there, you can wrap anything in the class "tooltiptext", which itself is wrapped in a div, and man it looks like shit, it looks like SHIT (pic 2).
The span is what the tooltip actually says.
but the players aren't gonna see that.
they're gonna see (pic 3).
which means you can do all sorts of goofy shit.
and if you're ever lost or just wanna know your options, check out this site.
https://www.w3schools.com/css/css_tooltip.asp