Help With the Strex Macro

[K]

Want I want to do is trigger the button by hovering my mouse over it, is there a way to do that.

If there isn't, there should be a way around it; I just want the hidden text to display upon hovering.

- Thanks

---

Edit: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.

[Stephan Hradek]

I don't know the macro and I don't want to dive into it, but here is a starting point for you using pure CSS:

CSS Tiddler:

span.strex:before {
content:"... ";
}
span:strex > span {
display: none;
}

span.strex:hover:before {
content:"";
}
span.strex:hover > span {
display:inline;
}

Strex is then used like this (without a macro, macro creation left as an excercise for the user)

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.

[Stephan Hradek]

As there was a small typo in the CSS and I wanted to experiment with a macro, please see below a macro-version.

CSS:

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;
}

Macro + usage

\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.

[codacoder...@outlook.com]

That's a pretty nifty use of the ::before pseudo element.  Love it.

[K]

[Stephan Hradek]

Am Sonntag, 27. August 2017 08:52:21 UTC+2 schrieb K:

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.

There's something wrong with that adjusted macro. Put more than one "footnote" into one tiddler and you cannot properly read them. Open one and all open.

[K]

Ah I've figured it out. Check this one attached. The macro was supposed to be called trhough <<ref, not <<strex.

[Stephan Hradek]

Am Sonntag, 27. August 2017 08:52:21 UTC+2 schrieb K:

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.

As I still do not want to dive into your macro, I've created this as a starting point.

Note that I like to have footnotes in seperate tiddlers, in this example called "fn1" and "fn2".

Stylesheet:

.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;
}

Code + example:

\define fn(name) <span class="sup">^$name$<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.

 

[K]

Ok thanks. Ill go poke around and see if I can get it working.

[Thomas Elmiger]

Hi

As the author of the strex macro I have to admit that for K’s requirement of showing the note on hover I think the best way is the last one: not to use strex at all :)

strex stores the state (open/closed) in state tiddlers. We need a cklick to create or change these.

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.

Good luck!
Thomas

[K]

So there's no other way to set the <<qualstate>> and class without a button?

[Thomas Elmiger]

K <ndr...@gmail.com> schrieb am So. 27. Aug. 2017 um 17:56:

So there's no other way to set the <<qualstate>> and class without a button?

Not one that I would know of. 

[Stephan Hradek]

Am Sonntag, 27. August 2017 17:48:21 UTC+2 schrieb Thomas Elmiger:

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.

Change the macro to:

\define fn(name) <span class="sup">^{<$link to="$name$"><$text text="$name$"/></$link>}<div><$transclude tiddler="$name$" mode="block"/></div></span>

and change in the CSS the left:0px; to

left:2em;

and the footnotes are additionally normal clickable links.