Added tooltips for context help in ping and metric fields. Fixes #293

[nfebe]

This PR addresses #293

Method

• Introduce an info icon svg
• Created a ToolTip component, that accepts a child element on which the tooltip would linger over.

Notes

• Tailwind was not used immediately for convenience (styles can easily be swapped if approach is approved)
• Thinking of an effective way to keep the tooltips hanging for a while after hover, so users can click on link in tooltips.
• Check metrics detail page to see how it works

Preview

[wlach]

This looks like a great start! A few things in addition to the comments:

1. The tooltips sometimes go off the screen-- I think using sveltejs-tippy (which builds off the tippy library) instead of rolling our own should fix it.

2. I think instead of persisting the tooltip so the user can click "Learn More", we can just make the help icons link to the documentation. This is what the old glean dictionary does and I think it works ok.
3. The pull request title should specify the issue fixed (Add tooltips with contextual help for application, ping and metric fields #293). See the contributing docs.

[wlach]

It probably makes sense to create a small component for this (in another project, I called a similar thing HelpHoverable)

[wlach]

This is the right idea, but I'd probably put this file in src/data/help.js (I don't think there's any need to specify that they have to do with tooltips specifically)

[wlach]

I think we can just call this link, for simplicity

Suggested change

	more_info:
	link:

[wlach]

It looks like sveltejs-tippy including the tippy library directly causes some minor issues. In particular, we need to import a plugin to postprocess the css, as well. This is the same as mdauner/sveltejs-tippy#117

After fixing this, I noticed the additional problem of the tippy library referencing something we don't have in a browser context (process). I fixed this using rollup-plugin-replace, but rollup-plugin-babel might do the same thing (it seems to work for sveltejs-tippy's demo) and would be a cleaner solution:

https://github.com/mdauner/sveltejs-tippy/blob/master/package.json#L35
https://github.com/mdauner/sveltejs-tippy/blob/master/rollup.config.js#L50

The following patch, if applies, makes things work again (though the styling still needs some work):

https://gist.github.com/wlach/bdaab17805e0a24fdabff718d15e9a12

Do you want to experiment with applying that, and maybe the babel thing I mention?

[nfebe]

Ok, I see! I could fix that now that it's clear, however, if we style need to do some styling, Why don't we eliminate this dependency all together, the overflow issue can easily be stripped down with a few tailwind classes.

[wlach]

Ok, I see! I could fix that now that it's clear, however, if we style need to do some styling, Why don't we eliminate this dependency all together, the overflow issue can easily be stripped down with a few tailwind classes.

I think the underlying tippy library does a lot of stuff, I'm a bit skeptical that the behaviour can be reproduced just with CSS. You're definitely welcome to try though!

[nfebe]

I checked the tipsy library again, it offers a lot (way more than we need) but the flexibility is enormous so I went with it.

[wlach]

This looks really good! I have some concerns about the implementation, hopefully they won't be too hard to address. Once we have an initial draft of this working, we can start using this in more places. :)

[wlach]

Hey, so a few things:

I think maybe some of my feedback got a bit garbled / misunderstood. Just to reframe again (maybe a bit more concretely):

1. I would rename ToolTip.svelte to HelpHoverable.svelte and define the various types of behaviour we want (the info icon, etc.) inside it.
2. The file you renamed to HelpHoverable.js can just be removed (since it's just an abstraction layer over the actual data which we don't need, at least not right now).

After the above suggestions are applied, MetricDetail.svelte should look something like this:

<script>
  ...
  import HelpHoverable from "../components/HelpHoverable.svelte"
  import HelpStrings from "../data/help";
  ...
</script>

...
<td>Send in Pings <HelpHoverable content={help.send_in_pings.content} link={help.send_in_pings.link} /></td>
...

[wlach]

This looks great, just have a few last requests for changes before we land.

[wlach]

Looks great, just one change (which I'll make), then we can land. @Iinh -- we'll need to rebase the protocol work on top of this at some point-- the amount of tailwind styling in here is pretty minimal so hopefully merging won't be so bad.

[wlach]

Thanks for your persistence on this @fenn-cs!