Render partials from JavaScript or prevent duplicate element IDs?

[Liam_Galt]

Hey there. I’m trying to set up some mouseover tooltips on a site and I essentially have this (abbreviated) setup:

Assume I have some things just called A, B, C, D that I’m rendering with a shortcode like {{< myshortcode A>}}

myshortcode.html essentially does this:

{the thing being moused over}

{the thing popping up} (or B, C, D tooltip, set by Params)

and some jQuery that is simply:
on(mouseenter) → $(${contentType}-tooltip).show()
on(mouseleave) → $(${contentType}-tooltip).hide()

What I’m trying to avoid is having multiple “A-tooltip” partials created if I have the shortcode showing up multiple times in a single page. The ideal solution for me would be for JavaScript to render the entire partial on mouseover and discard it when it’s no longer being hovered, but I can’t find info about rendering partials from the JavaScript side. An okay substitute would be to render all of them in the background (with display: none) and then do the same thing I’m doing above. Like I said, though, I’m trying to avoid rendering things multiple times and using the same element ID. All of the partials are being created from static data which I have in data/A.yaml, data/B.yaml, and so on.

[jmooring]

@Liam_Galt

I can’t find info about rendering partials from the JavaScript side

What does this mean?

What does the partial look like, and from where is it called?

[Liam_Galt]

Sorry for not being clear enough. I have a shortcode which generates one partial, which is essentially just changing the color of some text to make it stand out and sticking it in a span. This partial also creates an “aside” but sets it to display: none. I am then using jQuery to display the “aside” when I mouseover the “span.” There are cases where I might use the same shortcode twice in one page, and I want to prevent making multiple “asides” when doing so.

[jmooring]

@Liam_Galt

a shortcode which generates one partial

Sorry, I still don’t understand. Shortcodes don’t generate partials.

[Liam_Galt]

Okay, disregard the partials bit.

I have some static data stored in yaml files. I want to be able to use jQuery to mouse over something and have a div appear with data from those yaml files. Using Hugo am I able to accomplish this without the need to pre-render the contents of the yaml files, while avoiding duplicate renders of the same content (the same static data being referenced twice on a single page, but using a single shared rendering of its yaml)?

Edit: I did see in a different thread that I could read in the static data in JavaScript, so I suppose I could then create the elements by hand in JavaScript. What I’m hoping for is to render a partial using that data instead of having to do it manually on the JavaScript side. Is that doable?

[kcastellino]

Just so I understand:

• You have a YAML file with strings to put in tooltips
• You have some JavaScript to create tooltips
• You have a shortcode to mark where you want the tooltip to be
• You need a way to associate a particular tooltip message with a particular shortcode

Is that correct?

[Liam_Galt]

That’s essentially the idea, yeah. I am starting to think that the best way to do it might just be to create a hidden content section and pre-render all the tooltips and then load those from the JavaScript side on mouseover, with the id retrieved from the shortcode.

[chrillek]

Unrelated: isn’t jQiery kind of overkill to handle mouse over? Standard JavaScript and a class work just as well and have less overhead.

[Liam_Galt]

Probably, but I’m using it for some other things already so it’s not really using anything additional in this case.

[jmooring]

There are several ways to accomplish this, but I would make the shortcode:

• Wrap each word/phrase in a span element
• Give each span element an id attribute that contains something linking to the data key
• Write the span id to a page store

Then have the baseof template call a partial that iterates through the page store with duplicates removed, then pull from the data file to write a hidden div as needed. That way the partial only renders the markdown in the data file (a) on pages that actually use the shortcode, and (b) once for each tooltip if the word is used multiple times. The div would have a data attribute tied to the data key.

This was interesting, and applicable to other projects, so I created a quick proof-of-concept.

git clone --single-branch -b hugo-forum-topic-46278 https://github.com/jmooring/hugo-testing hugo-forum-topic-46278
cd hugo-forum-topic-46278
hugo server

[Liam_Galt]

Thanks for the example! This actually looks like it will be able to do almost exactly what I’m looking for, and has some other clever ideas that I can use.