Replace YUI tooltips with Tippy.js

[janfaracik]

This is the first of two PRs which intend to replace the existing YUI implementation of tooltips and menus with Tippy.js. This PR focuses solely on tooltips and brings native support for Tippy.js to Jenkins.

tippy.tooltips.mov

This brings several advantages:

• Better experience for users, animations, better placement engine
• Cleaner and better defined codebase
• Tippy is far more flexible than YUI, so we can be more creative with our designs
• Far easier to find support online
• YUI 2 is also abandoned since 2011

This implementation intends to maintain 100% backwards compatibility with the existing implementation of tooltips, it also introduces a new way to host HTML content in tooltips which is used for the project status tooltip using html-tooltip=" ... "

This change is documented in the updated Jenkins Design Library plugin.

For plugin developers

• For developers that are using Tippy.js as part of their plugin, they can now remove the dependency and instead rely on the Jenkins implementations (tooltip="hello world" or data-html-tooltip="<p>hello world</p>")

Proposed changelog entries

• Update appearance and framework for tooltips

Proposed upgrade guidelines

N/A

Submitter checklist

• (If applicable) Jira issue is well described
• Changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developer, depending on the change) and are in the imperative mood. Examples
  • Fill-in the Proposed changelog entries section only if there are breaking changes or other changes which may require extra steps from users during the upgrade
• Appropriate autotests or explanation to why this change has no tests
• New public classes, fields, and methods are annotated with @Restricted or have @since TODO Javadoc, as appropriate.
• For dependency updates: links to external changelogs and, if possible, full diffs

Desired reviewers

@mention

Maintainer checklist

Before the changes are marked as ready-for-merge:

• There are at least 2 approvals for the pull request and no outstanding requests for change
• Conversations in the pull request are over OR it is explicit that a reviewer does not block the change
• Changelog entries in the PR title and/or Proposed changelog entries are accurate, human-readable, and in the imperative mood
• Proper changelog labels are set so that the changelog can be generated automatically
• If the change needs additional upgrade steps from users, upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the PR title. (example)
• If it would make sense to backport the change to LTS, a Jira issue must exist, be a Bug or Improvement, and be labeled as lts-candidate to be considered (see query).

[NotMyFault]

• HTML doesn't seem to be handled properly here. I'm not sure if this is a special occasion, because the tooltip is provided as translation string in a .properties file, where <br> is not escaped at all:
  

• Tooltips are shown twice on this maven project if it's still building
  

• The history widget displays an empty tooltip if the job didn't complete yet to show the overall time it took:
  

This brings several advantages:

Also worth to note that YUI 3 is abandoned since 2014.

[janfaracik]

• HTML doesn't seem to be handled properly here. I'm not sure if this is a special occasion, because the tooltip is provided as translation string in a .properties file, where <br> is not escaped at all:
  
• Tooltips are shown twice on this maven project if it's still building
  
• The history widget displays an empty tooltip if the job didn't complete yet to show the overall time it took:
  

This brings several advantages:

Also worth to note that YUI 3 is abandoned since 2014.

Great finds! They should all be fixed now :)

[NotMyFault]

• This is a follow up to my previous comment regarding

HTML doesn't seem to be handled properly here. I'm not sure if this is a special occasion, because the tooltip is provided as translation string in a .properties file, where
is not escaped at all:

If no agent is available, tooltips are stacked for every attempt to trigger a build:

Though even if they're split into separate lines, it looks odd to have +1 message for every attempt, considering you don't enqueue several builds in that way, but that may be a different issue.

• Pipeline steps' tooltips are no longer attached to the step
  
  For reference, that overview is generated by the workflow-support-plugin.

- I'm not sure if this is intended, but the warnings-ng plugin overview in columns does now unfold into the column itself stretching it a lot, rather than floating around somewhere near the actual issue # it introduces.
Can be dismissed, the same behavior can be seen by other objects if they are in the last table column.

57e3a7e771072328ff86e4d8d93e9a52.mp4

But thanks so far for addressing the initial concerns 👏🏻 unfortunately a few tests are failing

[daniel-beck]

YUI 3 is also abandoned since 2014

Wait, why do we care? We're on 2.x 😎

[daniel-beck]

HTML doesn't seem to be handled properly here.

IMO we should consider making all tooltips plain text if we can get away with it. They've been a common source of XSS issues in the past. Of course, some minimal formatting ability may need to remain, like newlines.

CC @Wadeck

[timja]

YUI 3 is also abandoned since 2014

Wait, why do we care? We're on 2.x 😎

From 2011 by the looks of it not that I can find the source of the latest upgrade, 2.9.0 doesn't seem to be in the repo

[timja]

HTML doesn't seem to be handled properly here.

IMO we should consider making all tooltips plain text if we can get away with it. They've been a common source of XSS issues in the past. Of course, some minimal formatting ability may need to remain, like newlines.

CC @Wadeck

Looking at the code only <br> has been added by default.

You can opt-in to html processing with html-tooltip.

[timja]

/label ready-for-merge

---

This PR is now ready for merge, after ~24 hours, we will merge it if there's no negative feedback.

Thanks!

[uhafner]

Hmm, the tooltips on the dashboard now work correctly. But for the summary views it is broken now. New tooltips are not right at the corresponding element. And the existing tooltips lost their background. I need to check if this is due to changes to make my warnings plugin backward compatible with different core versions.

Bildschirmaufnahme.2022-11-22.um.10.48.32.mov

[uhafner]

I will merge jenkinsci/font-awesome-api-plugin#186 right now and release a new plugin version. Then the tooltips will look good with Popper as well.

The other problem with the tooltips shown somewhere off the element hopefully can be fixed by moving the tooltip to a different element.

As a feature request (not in this PR): it should be possible to define the Popper placement value as an attribute somehow.

[stephan-senkbeil]

With the latest weekly which includes this PR we are seeing very long loading times on our instance (~30 seconds for the main page).
I did a performance recording using the Chrome and Firefox dev tools and both show that calls to registerTooltips take a very long time. I am attaching a screenshot.

I am assuming that this is related to this PR but of course cannot be sure (especially because I am not a web/javascript developer myself).
Please let me know if there is anything I can provide or should do to support you in solving the issue (e.g. providing data, Jira issue).

[uhafner]

Please create an issue in Jira, so that we can track this.

[andrewkm]

We are experiencing the same issues with loading time.

[NotMyFault]

We are experiencing the same issues with loading time.

An improved has been submitted in #7464, which will be delivered in the next Tuesday's release and be backported into the next LTS release, 2.375.2

[MarkEWaite]

.. and be backported into the next LTS release, 2.375.2

Problem was only visible in weekly, not in LTS. I don't think that a backport will be needed

[NotMyFault]

.. and be backported into the next LTS release, 2.375.2

Problem was only visible in weekly, not in LTS. I don't think that a backport will be needed

I've been misguided by the Jira issue being labeled as LTS candidate. This PR is only present in 2.380, there's no need to backport that, indeed 👍🏻

[basil]

Caused ReadOnlyTest#testGlobalConfiguration to start timing out on CI builds in jenkinsci/bom#1611 (fixed by #7464).

[basil]

Good news: this fixed JENKINS-70369!

[basil]

In particular, this is the hunk that fixes JENKINS-70369. Could possibly be backported to stable-2.375 if desired, but likely not worth the effort for such a minor issue.

[daniel-beck]

Caused JENKINS-71880.

(Also, FTR, caused the resolved JENKINS-70178).

[daniel-beck]

Caused JENKINS-72744