Hello and quick tip: how to show link preview on hover in static websites

[Anne-Laure Le Cunff]

Hello everyone! I'm super new to TW - just discovered it yesterday. I'm a big fan of Roam Research and was looking for open source alternatives. Many thanks to Dave Gifford and Brandon Hall for their amazing YouTube content which got me curious.

Wanted to share a tiny tip for people building static websites from TW.

Add the following to $:/core/templates/static.tiddler.html (demo). This will add an iframe to all your links by targetting tc-tiddlylink.

document.body.innerHTML += '<iframe class="tipdescription" src="http://www.example.com"></iframe>';

var tiptext = document.querySelectorAll('.tc-tiddlylink');

var iframe = document.getElementsByClassName("tipdescription")[0];

tiptext.forEach(el => el.addEventListener('mouseover', event => {

   var elem = event.target;

      iframe.style.display = 'block';

      iframe.setAttribute("src", elem.getAttribute("href"));

      elem.appendChild(iframe);

}));

tiptext.forEach(el => el.addEventListener('mouseout', event => {

   var elem = event.target;

    iframe.style.display = 'none';

}));

--

Just a small way to give back. Very excited to join the community!

[Diego Mesa]

Anne-Laure,

Thanks for sharing! I believe this is similar to Tobias Beer's Preview plugin:

http://tobibeer.github.io/tw5-plugins/#preview

[Mat]

Warmly welcome to the community Anna-Laure and thanks for sharing - that's really cool!

Please tell others about TW. Our marketing department keeps insisting on not existing and there are many unfortunate people who have no idea about TW.

<:-)

[Anne-Laure Le Cunff]

Mat and Diego, I'm so sorry about the spam... I haven't used Google Groups in years.

@Diego: this looks great - is there a way to see what that plugin looks like without installing it? 

@Mat: my background is actually in marketing. Can't believe I haven't heard of TW before, such an amazing platform and community.

[David Gifford]

Hi Anne-Laure,

Where in that tiddler do I paste it?

On Sunday, April 12, 2020 at 5:20:14 PM UTC-5, Anne-Laure Le Cunff wrote:

[Mat]

Anne-Laure Le Cunff wrote:

@Diego: this looks great - is there a way to see what that plugin looks like without installing it? 

You can see it directly at that page he linked. It has a (configuarable) delay set to 1500 ms.

 

@Mat: my background is actually in marketing. Can't believe I haven't heard of TW before, such an amazing platform and community.

Yeah... it's been around since 2004!

 <:-)

[Anne-Laure Le Cunff]

@David: You need to paste this in $:/core/templates/static.tiddler.html - it will show up on your static website, not your backend wiki

@Mat: Incredible! And thank you - I ended up seeing it appear when waiting a little bit. Yes exactly the same idea!

[David Gifford]

Thanks ALLC

[Lin Onetwo]

Oh, this is useful.

I want the preview to close after my mouse leave the link, so I made a twick.

https://github.com/tobibeer/tw5-preview/issues/1

在 2020年4月13日星期一 UTC+8上午6:58:57，Diego Mesa写道：