KISS Macro to Create an Inline Tooltip - Stretch Text

Tips & Tricks
#1

A KISS (keep it simple stupid) solution to create a stretch text or inline tooltip can be created in Tiddlywiki using data attribute! This may be helpful to

  • show extra information on demand
  • show fields value in a tiddler
  • glossary definition

How to

  • Use data-* attribute
  • Use pseudo-element to include the data-* as its content
  • Reveal the pseudo-element on mouse hover or tap on touch screen devices

Code

\define ?(label, tooltip)
<span 
  class="kk-tooltip"
  data-kk-tooltip="""$tooltip$"""
>
$label$<sup>?</sup>
</span>
<style>
/*structure*/
.kk-tooltip{ cursor:pointer;}

[data-kk-tooltip]:after {
  content: attr(data-kk-tooltip);
    display:none;
}

[data-kk-tooltip]:hover::after {
  display: inline;
  opacity: 1;
}
/*skin*/
[data-kk-tooltip]:after{
 border-bottom:1px dotted;
 padding-left:2px;
 padding-right:2px;
 font-style:italic;
}
</style>
\end

Demo

  1. download tiny-tooltip-stretch-text.json (1.2 KB)
  2. drag and drop into https://tiddlywiki.com/
  3. open tooltip/demo tiddler
  4. hover mouse or tap on words followed by question mark

Screencast

img_833_chrome

2 Likes
Advanced Search in Fields Plugin: New Updates
#2

Remarks

  • use better name for macro
  • separate styles and put in a dedicated tiddler tagged with $:/tags/Stylesheet
  • use other indicator instead of ?
  • change the skin (e.g. color, font, border, …)

Example iii. Here I have used blue color with no border for tooltip text!

img_835_chrome

#3

How is it possible to have out of the Tooltip a clickable Link to another Tiddler (eg. Test)?

grafik
grafik1301Ă—213 16 KB

Thanks in advance
Stefan

#4

hi stefan, i’m not 100% sure but mohammad has a similar macro called stretchText in his refnotes plugin which works slightly differently to this example (it uses a button, so doesn’t autoclose until you activate the button again), but which definitely supports clickable links

i also like the non-button version in the OP so hope mohammad can answer your question if he has a chance!

(edit) spoke too soon, i was using an older version of refnotes 1.7.x (something) and it worked, but once i updated to the latest refnotes 1.8.3 calling <<stretchText “text here”>> macro no longer seemed to work in a new tiddler (it worked in 1.7.x and it still works in the 1.8.3 example tiddler so i suspect i’m using it wrongly somehow)

#5

@makiaea
As it is used internally in the new version you need to copy and paste the macro in a tiddler tagged with $:/tags/Macro.
You can then use it in your own Tiddlywiki

1 Like
#6

Hi Stefan,
To my best knowledge browser tooltip is a plain text! So, the current solution will not work!

1 Like
#7

thanks so much mohammad!

#8

Interesting! @telmiger made one before and @twMat before him.

I’m looking to see if this is better or not.

One question: Can they be nested? I.e. Can you have a Stretch text within a Stretch text?

TT

1 Like
#9

This is only for internal use to show some more information for bibtex entries in the bibliography tab in the sidebar. It is a minimal stretchtext macro.

Yes @telmiger and @TW_Tones are pioneer in this area!
Also the one is created by @sobjornstad in his tzk edition is great!

1 Like
#10

:smiley: Right! It is an “expander” :blush:

I am in no way criticising you!

But Stretch Text … well the whole original Ted Nelson idea was supporting infinite nesting.

Basically infinite expansion in context, rather than having links.

Here is an online example … Telescopic Text
Click to see the expansion.

Just a comment, TT

#11

TBH, I think it is a very interesting technique.

Obviously I’m more interested in the @sobjornstad @telmiger and @twMat versions of Stretch Text.

But there is a secondary issue issue: expand “what for what?” It is interesting that despite the “expansion” capabilities being around a long time they are rarely seen on the net. That is a socio-cultural thing, probably?

An inhibition about it?

Just a comment, TT