using tippy.js in harlowe?

Question

I've tried a million times to make tooltips with tippy.js (https://atomiks.github.io/tippyjs/) work in Harlowe but I find myself getting a variety of error messages: tippy is not defined, there is a bug in the Harlowe engine (and that's why the code won't work), etc. Could anybody help me figure out how to make this work?

What I have been doing is using the CDN and trying to give all elements with a title attribute a tooltip.

Answer 1

Your question is missing examples of:
a. How you are referencing the relevant CDN hosted Javascript file in your Story, and which of the tippy.js related files in the /dist/ folder are you trying to use?

b. Exactly what you mean by "all elements with a title attribute".
eg. are these HTML elements you manually added to the Passage or are they the HTML elements generated by <<macros>>.

c. How exactly were you trying to call the relevant tippy(...) functions uses to initialise the tooltips defined within the current Passage.

Issues that need to be overcome to use the tippy.js library.

1. The "see almond readme incorrect module build no module named" error message.

That Javascript library is trying to create a Javascript Module and this is commonly done using a AMD library like the one on the Require.JS web-site, in Harlowe's case it uses the AMD library from the Almond repository.

Many developers (like tippy.js) use the AMD define({...}) function (without an ID parameter) to define their Modules but unfortunately the version of Almond that Harlowe is using insists that developers use the AMD define('module ID', {...}) function (without an ID parameter) instead. This is what is causing the error you are seeing.

To fix this error you will need to modify the tippy.js source code and change the line of code that references the AMD define() function to use the one that includes an ID parameter. Exactly how you do that depends on which  tippy.js related script file you are using.

2. Changing the Scope of the tippy() function so that it is available within the context of a Passage.

Basically things created using Javascript exist within particular Scopes (Local, Private, Global, etc..) and things created in one non-Global scope are generally not available within another non-Global scope. The tippy() function is being created by that library is in a scope that isn't available within the scope of the Passage, nor within the scope of any <script> elements used within a Passage.

I was not able to change the scope of the tippy() function using the techniques I know, you will need the help of someone more experienced with Javascript & Modules to achieve this outcome.

Comments

I believe the following wrapper would also work, so as to remove the necessity of editing the library: (untested)

(function (define) {

	/* LIBRARY GOES HERE */

}).call(window);

The wrapper does two things:

1. Explicitly gives the library a this which is the window object, so it may attach itself as an auto-global.
2. Hides Almond's define() function, so it doesn't cause issues.  The library should fallback to attempting to attach itself as an auto-global—which we've ensured can happen via #1.

Answer 2

Based on TheMaxExile's (knowledgeable) suggestion in my other answer you would do the following:

1. Add his suggested code to your Story Javascript area.

2. Replace the /* LIBRARY GOES HERE */ comment in that code with the contents of whichever Tippy.JS script file you decide to use.
eg. If you choose to use the tippy.all.min.js file then open that file within your web-browser and cut-n-paste the contents over the above mention comment.

3. Add the Tippy.JS button example found under the Creating a tooltip header to your Passage.

<button class="btn" title="I'm a tooltip!">Text</button>

4. Use a script element within the same Passage to call the related tippy() function example.

<script>tippy('.btn');</script>

5. Play the story and place your mouse cursor over the button, a styled tool-tip should appear.