Transcluding tiddlers in popup windows

#1

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

#2

  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.

#3

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

#4

And you have all these in your file?

#5

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”

#6

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
#7

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>
#8

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