Storing text for later (js) usage

I have a list of page titles.

When hovering over one of them, the title text has to be substituted by an excerpt of the page’s description field. On mouse out, the excerpt is substituted back by the original title field text.

Since all the text is not a lot, I was thinking on storing it on page load, to access it later via js; instead of doing ajax style calls on every hover, which seems overkill ( feel free to correct me if I am wrong on this ).

And so my question is if there would be a kirby(3) prefered way of doing this. Storing data in the page for later usage (via js).

Thank you.

I would probably use data attributes here. Would be dead easy to spit the text you want out onto the element. Then you can easily swap it with javascript, or for extra points just CSS :slight_smile: There is a crash course here on Sitepoint.

Alternatively, you could use the router to generate the data in a Json file, and access it with javascript.

On the getkirby.com website, we also store the tooltips in a data attribute:

<span data-tooltip="<div class=&quot;bold -mb:small&quot;><a href=&quot;https://getkirby.com/docs/glossary/#panel&quot;>Panel</a></div><p>The Panel is Kirby's fast and powerful web interface to manage your website in the browser. The Panel is highly customizable in many ways for different project needs.</p>" tabindex="0">Panel</span>

Thank you both.

I was worried about putting too much text in there, but the length of the text is not going to be more than the example @texnixe is showing . So I guess that’s fine.

Thanks

I’d be more concerned about making this accessible than about the amount of data. That would be the same as if you just showed the excerpt in the first place.