Show linked tiddler text in popup (multiple)

#1

Hi folks,
How do I combine showing a link to tiddler as popup with setting up a function where I can do the same for multiple links.

I have several tiddlers that have word definitions.
Each tiddler has word as title and definition as text.

Ineffable Too great or extreme to be expressed in words.
Ephemeral Lasting for a very short time;] transient.
Serendipity The occurrence of events by chance in a happy or beneficial way.
Labyrinth A complicated irregular network of passages or paths; a maze.
Quintessential Representing the most perfect or typical example of something.
Euphoria A feeling or state of intense excitement and happiness.

Now I want to manually (need specific order for my use case) collect all the headwords in a separate tiddler and show the definition text as a popup (or hover)

Following the documentation I can do <$reveal> with <$button> using class=tc-btn-invisible tc-tiddlylink . Do I have to do this for each link?

Any pointers appreciated.

#2

If you want to pop up a modal with the definition, you might do something like this:

<ul>
<$list filter="[tag[Def]]">
<li><$button class="tc-btn-invisible">
  <$action-sendmessage $message="tm-modal" $param=<<currentTiddler>>/>{{!!title}}
</$button></li>
</$list>
</ul>

If you want to see the definition when hovering, you could use:

<$list filter="[tag[Def]]" join=", ">
<span title={{!!text}}>{{!!title}}</span>
</$list>

But without any visual indication, that feels strange. I would prefer to wrap the text in a link, like this:

<$list filter="[tag[Def]]" join=", ">
<$link title={{!!title}} ><span title={{!!text}}>{{!!title}}</span></$link>
</$list>

You can see all these in action by downloading this, dragging it onto a wiki and importing the results, Just open the Def tiddler

ShowTitles.json (2.0 KB)

Are any of those close to what you were looking for?

To control the order, you can do it in the list field of the Def tiddler, if you want this order to be used everywhere. But if you want to order them in place where you’re using them, you can just replace [tag[Def]] with the ordered list of values:

<$list filter="Serendipity Quintessential Labyrinth Ineffable Euphoria Ephemeral" join=", ">
<$link title={{!!title}} ><span title={{!!text}}>{{!!title}}</span></$link>
</$list>
#3

Thanks @Scott_Sauyet . I will report back.

Your post inspired me to think of solution for a problem I was going to have.

Thanks to you and @EricShulman’s explanation here
Here’s what I came up with:

\define show(input)
<$let popid="$:/temp/state/$(currentTiddler)$/$input$">

  <$button popup=<<popid>> class="tc-btn-invisible tc-tiddlylink">$input$</$button>
    <$reveal type="popup" state=<<popid>> position="aboveleft">
      <span class="popup tc-popup-keep tc-block-dropdown" style="padding:0.5em;">
        <$transclude $tiddler=$input$/>
      </span>
    </$reveal>

\end

with sample tiddler text:

<div align="right">
<<show Ineffable>> <br>
<<show Ephemeral>> <br>
<<show Serendipity>> <br>
<<show Labyrinth>> <br>
<<show Quintessential>> <br>
<<show Euphoria>> <br>
</div>

if the words are scattered in text or at the right side of the screen, the position=“aboveleft” doesn’t seem to be working.

What am I missing?

#4

I’m trying another idea (avoids a click) is to use tooltip. Needs work on positioning the tooltip at extreme edges.
Inspiration from @DaveGifford Transcluding tiddlers in popup windows

\define showtip(input)
<div class="tooltip">$input$<div class="tooltiptext"><$transclude tiddler=$input$ mode="block"/></div></div>
\end

sample text:

<div align="right">
<<show Ineffable>> <br>
<<show Ephemeral>> <br>
<<show Serendipity>> <br>
<<show Labyrinth>> <br>
<<show Quintessential>> <br>
<<show Euphoria>> <br>
</div>

<style>
.tooltip {
  position: relative;
  display: inline-block;
  color:#56e;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 500px;
height:300px;
overflow: scroll;
  background-color: beige;
  color: darkblue;
  text-align: left;
  border-radius: 6px;
-moz-box-shadow: 10px 10px 5px #bbb;
-webkit-box-shadow: 10px 10px 5px #bbb;
box-shadow: 10px 10px 5px #bbb;
  padding: 15px;
display:block;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 80;
  top: -220px;
  left: -510px;
}

.tooltip:hover > .tooltiptext {
  visibility: visible;
}
</style>
#5

I have the following in my wiki, tagged $:/tags/Macro

I think it was dreamt up by @twMat or @Mark_S or… (I really can’t remember, sorry)

\define HelpButton(label, ButtonText:?) <$tiddler tiddler=<<currentTab>>><<HelpButton_inner $label$ $ButtonText$>></$tiddler>
\define HelpButton_inner(label, ButtonText:?)
^^(<$button popup="""$:/temp/popup/$(currentTiddler)$/$label$""" class='tc-btn-invisible tc-tiddlylink'>$ButtonText$</$button>)<$reveal type='popup' state="""$:/temp/popup/$(currentTiddler)$/$label$"""><div class='tc-drop-down' style='width:200px;max-width:75vw;white-space:pre-wrap;padding:10px;text-align:left;font-size:1.5em;border-radus:0.5em;'><$transclude field="""$label$"""/></div></$reveal>^^
\end

Usage:

This adds a help button that looks like this<<HelpButton demo>>

This adds a help button that looks like this<>

This adds a help button that looks like this<<HelpButton demo2 'why?'>>

This adds a help button that looks like this<<HelpButton demo2 ‘why?’>>

Contents of the demo field: {{!!demo}} This is the demo help.

Contents of the demo2 field: {{!!demo2}}
This is a demo with a custom button.

You make a field for each label that contains the help information. This can have html and simple wikitext. Since it is a field linebreaks need to be added using html <br> tags.

You can drag it as tiddler from here:

1 Like