span.strex:before {
content:"... ";
}
span:strex > span {
display: none;
}
span.strex:hover:before {
content:"";
}
span.strex:hover > span {
display:inline;
}
The ''TextStretch'' css is a great tool <span class="strex"><span>for you as an author of hypertext</span></span> to keep the message short. Your readers can discover more details easily.
span.strex:before {
content:"\00a0...\00a0";
background-color: lightgray;
border: 1px solid black;
}
span.strex > span {
display: none;
}
span.strex:hover:before {
content:"";
border: none;
}
span.strex:hover span {
display:inline;
}
\define strex(text) <span class="strex"><span>$text$</span></span>
The ''TextStretch'' macro is a great tool <<strex "for you as an author of hypertext">> to keep the message short. Your readers can discover more details easily.
::before
pseudo element. Love it.I appreciate the help here, but I left out some information in my first post, the macro has already been adapted, and I'm not to proficient in scripting. If you still want to help, I've thrown together an empty tiddlywiki file containing what I have so far.I will also be editing the first post. What I've done is modify the button to look more like traditional annotations and make them change colors to ease the spotting in my main tiddlywiki file. It's jsut a hassle to click each one, so it'd be so much easier to hover and see hidden information.
I appreciate the help here, but I left out some information in my first post, the macro has already been adapted, and I'm not to proficient in scripting. If you still want to help, I've thrown together an empty tiddlywiki file containing what I have so far.I will also be editing the first post. What I've done is modify the button to look more like traditional annotations and make them change colors to ease the spotting in my main tiddlywiki file. It's jsut a hassle to click each one, so it'd be so much easier to hover and see hidden information.
.sup {
position: relative;
}
.sup > div {
display:none;
}
.sup:hover > div {
display:inline-block;
position: absolute;
zindex: 998;
top:-1em;
left:0px;
background: yellow;
opacity: 1;
border: 4px solid green;
min-width: 40em;
}
\define fn(name) <span class="sup"><sup>$name$</sup><div><$transclude tiddler="$name$" mode="block"/></div></span>
Suspendisse sagittis dui ac orci semper, et cursus felis aliquam<<fn fn1>>. Duis velit est, pulvinar sodales mauris et, sollicitudin tempor nisl. Quisque id mi vel est iaculis viverra. Donec viverra ac neque et pharetra. Nullam posuere commodo erat. Duis eu lectus vel magna porta laoreet vitae ut diam. In tempor felis vel arcu commodo placerat. Nulla purus velit, pretium a ligula id, scelerisque eleifend mauris. Nulla<<fn fn2>> facilisi. Sed vitae tortor ipsum. Nulla fermentum semper purus, eu facilisis nibh tristique id. Nulla tincidunt cursus lacus et pellentesque. Aliquam porttitor, nunc vel ornare efficitur, urna sapien aliquam erat, vitae varius mauris dolor in ipsum. Vestibulum hendrerit leo metus, nec ultrices neque maximus eget.
So there's no other way to set the <<qualstate>> and class without a button?
Concerning hover effects and :before I am not sure about the accessibility of such solutions. Touch devices and screen readers might have difficulties with those.
\define fn(name) <span class="sup"><sup><$link to="$name$"><$text text="$name$"/></$link></sup><div><$transclude tiddler="$name$" mode="block"/></div></span>
left:2em;