I use a CSS only solution at my forum, see it in action here:
https://moccato.de/d/85-neue-funktionen-bei-moccato/61
This is **~~hidden~~** text
renders as something similar to: This is 🔴 text
... and moving your mouse over the (in my forum brown) dot reveals the hidden text.
The CSS used:
.Post-body strong del:hover, .Post-body strong del:active {
display: inline;
width: auto;
height: auto;
font-weight: 300;
color: #dba333;
text-decoration: none;
border: none;
}
.Post-body strong del {
display: inline-block;
overflow: hidden;
width: 0;
height: 0;
border: #dba333 solid .4em;
border-radius: .4em;
}
That's all to do.
Side effect: If you want to provide a bold and striked through (deleted) text, you need to write it as ~~**hidden**~~
.
Con: You can't have bold or striked through text inside the hidden text.
Pro: Smilies inside the hidden text are no problem as are embedded or uploaded images.
I have not yet tested it with Flarum's beta 8, but I guess it should work just fine.