This post is a wiki … So it can be edited by everyone logged in.
Please add more real examples here!
Building a tooltip from fields or variables using filtered transclusion
<$button tooltip={{{ Here in [{!!title}] changes [<changecount>] +[join[ ]] }}}>Test button</$button>
- When you hover over the button the tooltip is displayed as text.
However if you use the same directly in wikitext
{{{ Here in [{!!title}] changes [<changecount>] +[join[ ]] }}}
It will appear as a missing tiddler link, but if you want plain text?.
- This is often resolved using the text widget as follows;
<$text text={{{ Here in [{!!title}] changes [<changecount>] +[join[ ]] }}}/>
An alternative it to create a template and use that to display the result of your filtered transclusion.
- In a tiddler called “text” add
<$text text=<<currentTiddler>>/> - Now add it to the filtered transclusion
{{{ Here in [{!!title}] changes [<changecount>] +[join[ ]]||text}}}
Converting the core icons to be usable in CSS stylesheets
The core icons lack the xmlns namespace and can’t be used as-is for CSS background (here’s why). However, svg can be nested, and you can nest the core svg using concatenation with a svg that has the correct namespace. The following example show how to apply any core image as a CSS background.
In a tiddler with the tag $:/tags/Stylesheet:
\rules except dash list
[class^="$:/core/images"],[class^="$:/core/icon"]{
aspect-ratio:1/1;
background:center/contain no-repeat var(--url);
display: inline-block;
width:22pt;
}
<$list filter="[[$:/tags/Image]tagging[]]" variable="image">
[class="<<image>>"]{
<$text text={{{ [[--url:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22pt" height="22pt">]][<image>get[text]else<image>][[</svg>')]]+[join[]search-replace:g[#],[%23]search-replace:g[
],[]]}}}/>
}
</$list>
Then write in a normal tiddler <i class="$:/core/images/add-comment" style.width="50px"/> to see the add-comment icon appear as a background. If you want to be able to change the color of the icon, you can either use a mask instead of a background image and set the color with the background color, or use concatenation to set a fill color.
Preventing de-duplication
Filters automatically discard earlier copies of the titles in a run (Dominant Append), this can cause issues if you try to concatenate words, for example :
{{{ [{!!title}] was created on [{!!created}] and was modified on [{!!modified}] +[join[ ]] }}}
Will output
New Tiddler created 20221225012543379 and was modified on 20221225012719154
The first “was” has been removed by the de-duplication. To prevent that, you can use the “=” sign :
{{{ =[{!!title}] =was =created =on =[{!!created}] =and =was =modified =on =[{!!modified}] +[join[ ]] }}}
This can get tedious if you have a lot of words, so to make things easier you can use " " to group several words :
{{{ =[{!!title}] ="was created on" =[{!!created}] ="and was modified on" =[{!!modified}] +[join[ ]] }}}