Providing information on demand to users in the UI

[TaniaSchlatter]

We have tooltips and instructional text to "speak" to users in the UI and provide guidance.

There are situations where providing more information on demand, such as links to sections of the user guides (like Make Data Count #5253), or to specific policies on the upcoming About Harvard Dataverse website, would help people make informed choices in the UI to complete tasks.

This is likely to be especially relevant when DataTags are implemented, and we need to provide supplemental information to people to help them select an appropriate DataTag for their data.

This issue is to consider how we might provide more info on demand in the UI, and implement a solution. Two possibilities:

• Bootstrap tooltips can be made to be sticky, and can have html such as links in them. This is a somewhat hacky solution. Might it work for us or not?
• Bootstrap has a "popover" component that is more robust, and can have images, HTML, and links. Might this work for us? How or how not?

Definition of done is mockups in code of both of these methods, and implementation of one of them (or something better that does the job) for the Metrics block in the UI.

[djbrooke]

The output of this spike is that we will make an informed decision about whether to use Bootstrap Tooltips, Popovers, or something else, taking into account use cases that currently exist and future expected use cases.

[TaniaSchlatter]

Mockups to show possible acceptable outcomes:

Link in tip on an icon:

Link in tip on an icon (popover-style):

The solution needs to work for other instances such as DataTags as well.
Link in tip on a DataTag:

[TaniaSchlatter]

Useful article that outlines tooltip issues and recommendations. Particularly interesting recommendation is this toggle. Refer to the article for details: https://adamsilver.io/articles/the-problem-with-tooltips-and-what-to-do-instead/

[djbrooke]

Closing in favor of #6209.