Transclude tiddler body in tooltip

[Anne-Laure Le Cunff]

Hello everyone!

I have a couple of questions.

1) I'm trying to achieve this but it makes saving incredibly slow and I can't even export my TW as a static website anymore.

• When I transclude the title, it works fine:

\define tv-wikilink-tooltip()

<$transclude field="tooltip"><$transclude field="text"/></$transclude>

\end

Here is a link to [[Title of Tiddler]] with a custom tooltip.

• But when I transclude the text, it just keeps on hanging:

\define tv-wikilink-tooltip()

<$transclude field="tooltip"><$transclude field="text"/></$transclude>

\end

Here is a link to [[Title of Tiddler]] with a custom tooltip.

The file I'm editing is a clone of $:/core/ui/ViewTemplate as I would like this change to work globally. Is there another way to go about this which wouldn't not let the whole thing hang every time I try to export it to a static website?

2) Ideally, I'd rather note transclude the whole content of the target Tiddler, just say the first 140 characters. Is there a way to achieve this with templates or tv-wikilink-tooltip Variable?

You can visit this website from your laptop and hover over "nebulosity" or "stance" until you see the tooltip to get an idea of what I'm trying to achieve.

3) Has anyone implemented Tippy.js or similar to better style your tooltips, and in particular make them appear faster? I can't find anything in the official TW documentation.

Many thanks!

[TonyM]

The transclude text is transcluding the current tiddlers text which transcludes the current tiddlers text to infinity....

Regards
Tony

[Jeremy Ruston]

Hi Anne-Laure,

1) I'm trying to achieve this but it makes saving incredibly slow and I can't even export my TW as a static website anymore.

• When I transclude the title, it works fine:

\define tv-wikilink-tooltip()

<$transclude field="tooltip"><$transclude field="text"/></$transclude>

\end

Here is a link to [[Title of Tiddler]] with a custom tooltip.

• But when I transclude the text, it just keeps on hanging:

\define tv-wikilink-tooltip()

<$transclude field="tooltip"><$transclude field="text"/></$transclude>

\end

Here is a link to [[Title of Tiddler]] with a custom tooltip.

Pre-rendering tooltips is indeed horribly slow. I just tried enabling it globally on a copy of tiddlywiki.com and it’s still stuck on the splash screen after 5 minutes.

The file I'm editing is a clone of $:/core/ui/ViewTemplate as I would like this change to work globally. Is there another way to go about this which wouldn't not let the whole thing hang every time I try to export it to a static website?

Macros can be created that are local to the view template by tagging them $:/tags/Macro/View, which is preferable to overwriting the view template. But it will only make the performance better if you’ve got links outside the view template that will no longer be tooltippified.

2) Ideally, I'd rather note transclude the whole content of the target Tiddler, just say the first 140 characters. Is there a way to achieve this with templates or tv-wikilink-tooltip Variable?

Yes, although it would still have to compute the entire transclusion before truncating it, and the current mechanism for truncating strings is a bit clunky, so it will make things even slower.

\define tv-wikilink-tooltip()

\whitespace trim

<$wikify name="tooltip" text="""<$transclude field="tooltip"><$transclude field="text"/></$transclude>""">

<$text text={{{ [<tooltip>split[]first[120]join[]] }}}/>

</$wikify>

\end

It’s fairly grisly at first sight because we have to use the wikify widget to grab the text output of rendering a wikitext string.

You can visit this website from your laptop and hover over "nebulosity" or "stance" until you see the tooltip to get an idea of what I'm trying to achieve.

3) Has anyone implemented Tippy.js or similar to better style your tooltips, and in particular make them appear faster? I can't find anything in the official TW documentation.

I’d hope that tools like that might just drop in, and pick up the title attributes on the links.

Best wishes

Jeremy.

Many thanks!

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/d72c9294-010a-4000-b3c5-16c2fdd282cb%40googlegroups.com.

[Jeremy Ruston]

Hi Tony

> On 20 Apr 2020, at 12:49, TonyM <anthony...@gmail.com> wrote:
>
> The transclude text is transcluding the current tiddlers text which transcludes the current tiddlers text to infinity....

TiddlyWiki does in fact have built-in protection against infinitely recursive transclusion loops. It doesn’t (yet) have such protections for recursive macros.

Best wishes

Jeremy.

>
> Regards
> Tony

>
> --
> You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/7c7564ed-369f-4062-8d94-d3015fad032e%40googlegroups.com.

[Anne-Laure Le Cunff]

Thanks both!

@Tony: As you can see in the gif I recorded, it actually transcludes the text of the target tiddler, which is exactly what I want. It just seems like it's extremely slow and I can't export my TW as a static website.

@Jeremy: Thanks so much, that's extremely helpful.

I created a macro but $:/tags/Macro/View doesn't work - is it because I'm using a clone of the core view template? ($:/ness_labs/template/static-view-template)

If so, which tag should I use to target it?

It does work with just $:/tags/Macro but probably defeats the purpose.

Many thanks!

Anne-Laure.

On Monday, April 20, 2020 at 1:02:53 PM UTC+1, Jeremy Ruston wrote:

Hi Tony

> On 20 Apr 2020, at 12:49, TonyM <anthon...@gmail.com> wrote:
>
> The transclude text is transcluding the current tiddlers text which transcludes the current tiddlers text to infinity....

TiddlyWiki does in fact have built-in protection against infinitely recursive transclusion loops. It doesn’t (yet) have such protections for recursive macros.

Best wishes

Jeremy.

>
> Regards
> Tony
>
> --
> You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.

> To unsubscribe from this group and stop receiving emails from it, send an email to tiddl...@googlegroups.com.

[Jeremy Ruston]

Hi Anne Laure

I created a macro but $:/tags/Macro/View doesn't work - is it because I'm using a clone of the core view template? ($:/ness_labs/template/static-view-template)

That’s strange. Does your clone still include the line "\import [all[shadows+tiddlers]tag[$:/tags/Macro/View]!has[draft.of]]”?

If so, which tag should I use to target it?

It does work with just $:/tags/Macro but probably defeats the purpose.

It’ll only make a difference if you’ve got a significant number of links outside of the view template (e.g. in the sidebar).

Best wishes

Jeremy,

Many thanks!

Anne-Laure.

On Monday, April 20, 2020 at 1:02:53 PM UTC+1, Jeremy Ruston wrote:

Hi Tony

> On 20 Apr 2020, at 12:49, TonyM <anthon...@gmail.com> wrote:
>
> The transclude text is transcluding the current tiddlers text which transcludes the current tiddlers text to infinity....

TiddlyWiki does in fact have built-in protection against infinitely recursive transclusion loops. It doesn’t (yet) have such protections for recursive macros.

Best wishes

Jeremy.

>
> Regards
> Tony
>
> --
> You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to tiddl...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/7c7564ed-369f-4062-8d94-d3015fad032e%40googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/1fa406f3-9c31-4f73-98e2-6b737c0c7e85%40googlegroups.com.

[Anne-Laure Le Cunff]

Hi Jeremy,

No, I used this tutorial as I'm using TW as a static website generator, so my clone looks like this:

\define folded-state()

$:/state/folded/$(currentTiddler)$

\end

<main role="main" class="container">

  <div class="row">

    <div class="col-md-8 blog-main">

      <article class="blog-post">

        <h1 class="blog-post-title"><$view field="title"/></h1>

        <$transclude mode="block"/>

      </article><!-- /.blog-post -->

    </div><!-- /.blog-main -->

    <aside class="col-md-4 blog-sidebar">

      <div class="p-3 mb-3 bg-white rounded">

        <p class="text-secondary">Last edited <$view field="modified" format="date" template="DDth MMM YYYY"/></p>

        <h3 class="mt-3">Backlinks</h3>

<<list-links filter:"[all[current]backlinks[]]+[!tag[hide]]+[!has[draft.of]]+[!is[system]sort[]]" class:"list-unstyled">>

      </div>

    </aside><!-- /.blog-sidebar -->

  </div><!-- /.row -->

</main><!-- /.container -->

Maybe that's what's causing the issue. In the mean time, I decided to transclude the caption instead and will add these manually, hopefully should keep on working as I add notes :)

Thank you!

<main role="main" class="container">

  <div class="row">

    <div class="col-md-8 blog-main">

      <article class="blog-post">

        <h1 class="blog-post-title"><$view field="title"/></h1>

        <$transclude mode="block"/>

      </article><!-- /.blog-post -->

    </div><!-- /.blog-main -->

    <aside class="col-md-4 blog-sidebar">

      <div class="p-3 mb-3 bg-white rounded">

        <p class="text-secondary">Last edited <$view field="modified" format="date" template="DDth MMM YYYY"/></p>

        <h3 class="mt-3">Backlinks</h3>

<<list-links filter:"[all[current]backlinks[]]+[!tag[hide]]+[!has[draft.of]]+[!is[system]sort[]]" class:"list-unstyled">>

      </div>

    </aside><!-- /.blog-sidebar -->

  </div><!-- /.row -->

</main>

Hi Anne Laure

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/1fa406f3-9c31-4f73-98e2-6b737c0c7e85%40googlegroups.com.

[Jeremy Ruston]

Hi Anne-Laure,

OK, that is indeed a custom view template, and it doesn’t include support for $:/tags/Macro/View. If you wanted to, you could add this as the first line of the tiddler:

\import [all[shadows+tiddlers]tag[$:/tags/Macro/View]!has[draft.of]]

Best wishes

Jeremy.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/50f7c90d-fcf6-4301-ac32-60b24b265d3c%40googlegroups.com.

[Saq Imtiaz]

If you would like to automate generating the caption, perhaps look into generating and saving and excerpt in the caption field when a tiddler is saved?

[Anne-Laure Le Cunff]

That's a great idea, thank you!

[Anne-Laure Le Cunff]

I found this amazing plugin by Tobi Beer which does almost exactly what I want — thanks Yoni for sharing the link!

Does anyone have a guide / any clue as to how the same behaviour could be preserved when exporting to a static website? (I have the Node.js version of TW installed)

Thanks so much.

[Saq Imtiaz]

The source code of that plugin has been compressed and obfuscated, however I suspect it calculates and renders the preview on demand, i.e. when you hover over a link. That won't work when exported to a static website, unless there is javascript library that we can drop in that can do the same for static html sites.

Otherwisem I think your best bet is probably to look into modifying the behaviour of the save button in the edit template, to see if you can save text for the preview into a separate field when a tiddler is saved.

[Diego Mesa]

Anne-Laure,

For reference/completion, Tobi Beer's plugin was also the solution I proposed in this thread you started about "how to show link preview on hover in static websites" not that long ago:

https://groups.google.com/d/msg/TiddlyWiki/_7ozNvkpPVg/vHXL1Ae4AgAJ

Diego

[Anne-Laure Le Cunff]

@Saq - thank you for confirming! Didn't realise these were generated on demand. That explains why it doesn't work with the static website.

@Diego - totally missed that previous message. Thank you! Yes this is exactly what I want.

So, just to recapitulate where I'm at, I used a couple of solutions that more or less worked once exported as a static website:

1) Old school iframe which works on static website but doesn't look great (see here, hover your mouse on "Other Minds")

2) Transclude caption into "tooltip" (which unfortunately uses the default "title tooltip" from the browser so takes a long time to show up)

\define tv-wikilink-tooltip()

<$transclude field="tooltip"><$transclude field="caption"/></$transclude>

\end

Here is a link to [[Title of Tiddler]] with a custom tooltip.

And I added a "caption" field to each Tiddler. Works once exported to static website. Pretty happy with this except that the tooltip takes a long time to appear. I much prefer the look and speed of the ones in Tobi Beer's plugin.

---

3) Use Tobi Beer's plugin, which transcludes the whole target article (see demo, maybe a bit over the top). Works great on TW itself but doesn't work (as Saq confirmed) when exported to a static website.

So my question is... Do you think there's a way to implement #2 (display caption field in tooltip) with the look and speed of #3 (Tobi Beer's plugin)?

Sorry for the rambling, and thanks so much for your help!

[Saq Imtiaz]

Try the following:

1) Backup your data, this is untested.

2) Save this as a custom Edit Template, say with title MyEditTemplate:

\define save-tiddler-actions()

<$action-sendmessage $message="tm-add-tag" $param={{{ [<newTagNameTiddler>get[text]] }}}/>

<$action-deletetiddler $tiddler=<<newTagNameTiddler>>/>

<$action-sendmessage $message="tm-add-field" $name={{{ [<newFieldNameTiddler>get[text]] }}} $value={{{ [<newFieldValueTiddler>get[text]] }}}/>

<$action-deletetiddler $tiddler=<<newFieldNameTiddler>>/>

<$action-deletetiddler $tiddler=<<newFieldValueTiddler>>/>

<$wikify name="tooltip" text={{!!text}}>

<$action-sendmessage $message="tm-add-field" $name="excerpt" $value={{{ [<tooltip>split[]first[120]join[]] }}} />

</$wikify>

<$action-sendmessage $message="tm-save-tiddler"/>

\end

<div data-tiddler-title=<<currentTiddler>> data-tags={{!!tags}} class={{{ tc-tiddler-frame tc-tiddler-edit-frame [<currentTiddler>is[tiddler]then[tc-tiddler-exists]] [<currentTiddler>is[missing]!is[shadow]then[tc-tiddler-missing]] [<currentTiddler>is[shadow]then[tc-tiddler-exists tc-tiddler-shadow]] [<currentTiddler>is[system]then[tc-tiddler-system]] [{!!class}] [<currentTiddler>tags[]encodeuricomponent[]addprefix[tc-tagged-]] +[join[ ]] }}}>

<$fieldmangler>

<$vars storyTiddler=<<currentTiddler>> newTagNameTiddler=<<qualify "$:/temp/NewTagName">> newFieldNameTiddler=<<qualify "$:/temp/NewFieldName">> newFieldValueTiddler=<<qualify "$:/temp/NewFieldValue">>>

<$keyboard key="((cancel-edit-tiddler))" message="tm-cancel-tiddler">

<$keyboard key="((save-tiddler))" actions=<<save-tiddler-actions>>>

<$list filter="[all[shadows+tiddlers]tag[$:/tags/EditTemplate]!has[draft.of]]" variable="listItem">

<$set name="tv-config-toolbar-class" filter="[<tv-config-toolbar-class>] [<listItem>encodeuricomponent[]addprefix[tc-btn-]]">

<$transclude tiddler=<<listItem>>/>

</$set>

</$list>

</$keyboard>

</$keyboard>

</$vars>

</$fieldmangler>

</div>

3) edit $:/config/ui/EditTemplate and replace its content with the title of the template tiddler you created in #2 above, so that our new edit template is used

4) Try editing and saving any tiddler, an excerpt should get saved into a field called "excerpt"

5) use the excerpt field for the tooltip, you could also rename to caption.

6) if all the above steps work reliably (and I believe they should), next step could be to look into outputting html that would support dropping in a library like tippy.js in the static version to control the display of the tooltip. Tippy.js expects an attribute

data-tippy-content

on links that contains the tooltip text to display.

Hope this helps,
Saq

[Anne-Laure Le Cunff]

Hi Saq,

Thanks so much for this!

Sorry for the newbie question, but can you confirm creating an Edit Template consists in tagging the Tiddler with $:/tags/EditTemplate?

Thank you!

Anne-Laure.

[Saq Imtiaz]

Anne-Laure: No. Create a new tiddler with any title (e.g MyCustomEditTemplate) , and paste the contents I provided into it. No tag needed.

Step 2, where we edit $:/config/ui/EditTemplate and replace the contents with the title you used in Step 1 (MyCustomEditTemplate), tells TiddlyWiki to use an entirely different EditTemplate instead of the default one.

The tag $:/tags/EditTemplate is used when you want to add something to the existing template, we are replacing it entirely, so as to override the macro that dicatates what happens when we save a tiddler. So do not tag the tiddler you create in step 1.

Regards,

Saq

[Anne-Laure Le Cunff]

Thanks Saq! I probably didn't understand step 2 properly, since this is what I get when I click the "+" to create a new tiddler:

[Anne-Laure Le Cunff]

(just wanted to add I managed to reverse the changes back so there's no rush)

[Saq Imtiaz]

I am running on not much sleep which probably isn't helping with writing the most coherent explanations :)

Have a look at https://saqimtiaz.github.io/sq-tw/tooltips-tippyjs.html

Of the open tiddlers examine and import to your TW the following (after backing up your data).

$:/config/ui/EditTemplate
$:/MyEditTemplate
$:/sq/LinkWidgetTweak

from the tiddler "For the view template" copy the macro tv-wikilink-excerpt to the top of your custom view template (which you posted in the thread earlier).

Lastly, in the tiddler "For the view template" inspect the html for the link to HelloThere.

[Anne-Laure Le Cunff]

You should get some sleep! :) I'm super grateful for your help, thank you!

[Saq Imtiaz]

Once you have those three tiddlers in your TiddlyWiki, save and reload. Add the macro from "For the view template" to the top your view template tiddler.

- Now everytime you edit and save a tiddler, the excerpt field will be auto-populated.

- The macro in the view template will help generate the appropriate attribute on the html of every link to support tippy.js

The missing piece then is adding tippy.js to your static site and initializing it.

Good night!

[Peter Buyze]

A useful plug-in indeed. Nevertheless, when I hover over an internal link, the plug-in gives a preview but it is not in a distinct, well-readable floating box, rather it is transparent with the original tiddler's text visible.

20 Apr 2020, 22:03 by alec...@gmail.com:

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/e6113f6f-37ff-4a26-8d2c-626ef8435480%40googlegroups.com.

[David Gifford]

I already sent these to Anne-Laure by Twitter, but for those of you who are interested in this thread

1) I came up with a clunky way to do this (transcluded tiddler in a popup in a static html)

1a) Here is the static html: https://giffmex.org/experiments/Testing%20popup%20links.html

1b) Here is the TiddlyWiki I did it from, with explanations

2) Anne-Laure also came up with a way to do the same. Final product: https://mentalnodes.netlify.app/lorem-ipsum.html. I haven't seen how she does it.

[Ste Wilson]

Would Jeds help button macro be of any use to obtain a similar effect?

\define HelpButton(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='max-width:100%;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<<HelpButton demo>>

```

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

Contents of the `demo2` field: {{!!demo2}}

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.

[Anne-Laure Le Cunff]

Okay I think I'm done with this thing, working as I wanted it to :) Open this on your laptop and hover over any link to see what it looks like.

[David Gifford]

meh. :-) no, it looks great!

David Gifford

Mexico team leader, Mexico City

Resonate Global Mission
Engaging People. Embracing Christ.
A Ministry of the Christian Reformed Church
resonateglobalmission.org

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/YaVbGH8S4_0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/c6513ec0-6a74-48e1-8377-93d87300bdb3%40googlegroups.com.

[Mat]

Anne-Laure Le Cunff wrote:

Okay I think I'm done with this thing, working as I wanted it to :) Open this on your laptop and hover over any link to see what it looks like.

Overall good but when popup shows, it triggers the page scrollbar which in turn shifts the text to the left a "scrollbars width". My screen is such that the link is linebroken at :

....the only way to learn in public is to

build in public.

<:-)

[Anne-Laure Le Cunff]

Could you send me a screenshot? I can't seem to be able to reproduce this 🤔

Thank you!

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/902d15ac-3e83-4a64-8a34-026cabeedc47%40googlegroups.com.

[Sylvain Naudin]

Le mercredi 22 avril 2020 17:00:11 UTC+2, Anne-Laure Le Cunff a écrit :

Could you send me a screenshot? I can't seem to be able to reproduce this 🤔

Thank you!

On Wed, 22 Apr 2020, 13:51 Mat, <matia...@gmail.com> wrote:

Anne-Laure Le Cunff wrote:

Okay I think I'm done with this thing, working as I wanted it to :) Open this on your laptop and hover over any link to see what it looks like.

Overall good but when popup shows, it triggers the page scrollbar which in turn shifts the text to the left a "scrollbars width". My screen is such that the link is linebroken at :

....the only way to learn in public is to

build in public.

<:-)

If I'm not wrong, it's related to the 2-column structure. So retunr after 'is to' is logical, since there is no space à right after.

Sylvain

[Mat]

Anne-Laure Le Cunff wrote:

Could you send me a screenshot? I can't seem to be able to reproduce this 🤔

So "Making Nodes" stays fixed but all other text shifts left half a cm.

<:-) 

 

[Mat]

BTW, win10, chrome.

<:-)

[TonyM]

All, 

Sorry I am saying this so late in the discussion but "Transclude tiddler body in tooltip"

sounds so much Like Preview and thumbnails of which I have seen a number over time. 

Mohammad has a nice thumbnail for slide shows that could be adapted and If I had more experience at popups I could write a macro in a moment. I have seen mouse overviews of named tiddler contents before and even search results within a context excerpt that can be toggled for more info.

A little more research of prior work could help here.

Regards

Tony