Transcluding tiddlers in popup windows

@DaveGifford I have tried using your code to achieve a preview pop-up. Whilst the pop-up works, the window it displays is totally empty.

Even your sample code gives an empty pop-up.
<div class="tooltip"><a href="https://giffmex.org">Giffmex</a><div class="tooltiptext"><$transclude tiddler="New Tiddler" mode="block"/></div></div>

Poblem is present in both Brave and Firefox.

  1. I’m not sure where you are getting this from.

  2. In Chrome that snippet as is, tested at empty.html, is showing me a link to giffmex.org and a transclusion of New Tiddler. No pop-up or tooltip. So there must be other stuff on the page where you are getting that snippet from that supplies the pop-up. Is this part of a macro?

  3. What is transcluded is the contents of the tiddler “New Tiddler”. If you don’t have content in a tiddler by that title, of course it is going to be empty.

Hello @DaveGifford
I think this How to transclude tiddlers in popup windows is what @myfta is referring to.

And you have all these in your file?

Indeed it was. What I have now realised is the “New Tiddler” is an actual tiddler with the content you are transcluding rather than just a ‘place holder’! (So the initial problem is sorted.)

As this is using the TranscludeWidget I know it is possible to transclude a specific field from the tiddler, but is it possble to transclude two fields from that same tiddler consequutively? So the pop-up shows, say, “field1 field2”

You can just duplicate the transclude widget. Copy <$transclude tiddler="New Tiddler" mode="block"/> and insert it immediately after, so the two transclude widgets are one after the other.

<div class="tooltip"><a href="https://giffmex.org">Giffmex</a><div class="tooltiptext"><$transclude tiddler="New Tiddler" mode="block"/><$transclude tiddler="New Tiddler" mode="block"/></div></div>
1 Like

If you’re only displaying two fields, it may be easier just to copy the $transclude widget, as Dave suggested. But here’s an alternate way to transclude as many fields from the same tiddler as you want (lightly modified from Dave’s code; added some tabs for legibility):

<div class="tooltip">
	<a href="https://giffmex.org">Giffmex</a>
	<div class="tooltiptext">
		<$list filter="field1 field-a" variable=field> <!-- list all the field names you want to transclude -->
			<$transclude tiddler="New Tiddler" field=<<field>> mode="block"/>			
		</$list>
	</div>
</div>

It looks neat too. I also tweaked your CSS to make the scrollbars auto so that generally only the vertical ones appear as necessary and set with a smaller height value. If you akso delete vertical from your CSS then the popup expands to fit the text too.

.tooltip .tooltiptext {
  visibility: hidden;
  width: 400px;
overflow: auto;
  background-color: white;
  color: #000;
  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;
1 Like