Skip to content

Replace foundation tooltips with custom implementation#3462

Merged
Simrayz merged 5 commits intomasterfrom
chore/replace-foundation-tooltips
Sep 2, 2025
Merged

Replace foundation tooltips with custom implementation#3462
Simrayz merged 5 commits intomasterfrom
chore/replace-foundation-tooltips

Conversation

@Simrayz
Copy link
Copy Markdown
Contributor

@Simrayz Simrayz commented Aug 25, 2025 •
edited
Loading

Scope and purpose

Part of #2972.

Adds an implementation for a custom NAV Tooltip. This PR replaces usages of [data-tooltip] throughout the codebase, with the exception of one case in the Status tool that should be done in a follow-up task, namely #3463 .

The new tooltip supports alignment from the start or end of the trigger element, and automatic change of alignment if the tooltip extends beyond the viewport.

This pull request

  • Adds nav tooltip styles and event listeners for updating alignment based on viewport
  • Replaces usages of [data-tooltip] in various tools with the new implementation
  • Replaces usage of [data-tooltip] in reusable form templates, like foundation-5/field.html or custom_crispy_templates/field_helptext_as_icon.html

Screenshots

Before

/search/room/100/#!netboxinterfaces
image

/alertprofiles/profile/1026/
image

/l2trace/
image

After

/search/room/100/#!netboxinterfaces
image

/alertprofiles/profile/1026/
image

/l2trace/
image

Contributor Checklist

Every pull request should have this checklist filled out, no matter how small it is.
More information about contributing to NAV can be found in the
Hacker's guide to NAV.

  • Added a changelog fragment for towncrier
  • Added/amended tests for new/changed code
  • Added/changed documentation
  • Linted/formatted the code with ruff, easiest by using pre-commit
  • The first line of the commit message continues the sentence "If applied, this commit will ...", starts with a capital letter, does not end with punctuation and is 50 characters or less long. See https://cbea.ms/git-commit/
  • This pull request is based on the correct upstream branch: For a patch/bugfix affecting the latest stable version, it should be based on that version's branch (<major>.<minor>.x). For a new feature or other additions, it should be based on master.
  • If applicable: Created new issues if this PR does not fix the issue completely/there is further work to be done
  • If this results in changes in the UI: Added screenshots of the before and after
  • If this adds a new Python source code file: Added the boilerplate header to that file

@Simrayz Simrayz self-assigned this Aug 25, 2025
@Simrayz Simrayz linked an issue Aug 25, 2025 that may be closed by this pull request
Replace foundation tooltips with custom implementation #3449
Closed
@github-actions
Copy link
Copy Markdown

github-actions bot commented Aug 25, 2025 •
edited
Loading

Test results

   12 files     12 suites   12m 19s ⏱️
2 368 tests 2 368 ✅ 0 💤 0 ❌
6 639 runs  6 639 ✅ 0 💤 0 ❌

Results for commit 59f2112.

♻️ This comment has been updated with latest results.

@codecov
Copy link
Copy Markdown

codecov bot commented Aug 25, 2025 •
edited
Loading

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 61.09%. Comparing base (73733b4) to head (59f2112).
⚠️ Report is 350 commits behind head on master.

Additional details and impacted files 
@@           Coverage Diff           @@
##           master    #3462   +/-   ##
=======================================
  Coverage   61.09%   61.09%           
=======================================
  Files         610      610           
  Lines       44715    44715           
  Branches       43       43           
=======================================
  Hits        27319    27319           
  Misses      17386    17386           
  Partials       10       10

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Simrayz Simrayz force-pushed the chore/replace-foundation-tooltips branch from 12ce8c1 to f1d4ac1 Compare August 25, 2025 14:07
@Simrayz Simrayz marked this pull request as ready for review August 28, 2025 09:17
@johannaengland johannaengland requested a review from a team August 29, 2025 08:30
hmpf
hmpf requested changes Aug 29, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@hmpf hmpf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whitespace around the text is inconsistent.

@hmpf hmpf requested a review from a team August 29, 2025 10:23
@Simrayz
Copy link
Copy Markdown
Contributor Author

Simrayz commented Aug 29, 2025

Whitespace around the text is inconsistent.

Are you referring to the "l2trace" tooltip? Other than the width, this is identical to the foundation tooltip. The ul/li elements are affected by some global css, which I've not adjuster in this PR as I'm not sure of the side effects.

@Simrayz Simrayz added the discussion Requires developer feedback/discussion before implementation label Aug 29, 2025
@Simrayz Simrayz force-pushed the chore/replace-foundation-tooltips branch from f1d4ac1 to ffaf165 Compare September 1, 2025 13:47
@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud bot commented Sep 2, 2025

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@Simrayz
Copy link
Copy Markdown
Contributor Author

Simrayz commented Sep 2, 2025

Whitespace around the text is inconsistent.

@hmpf I adjusted the whitespace (removing trailing margin) and font-size to make it consistent. Also added the bullet points to make it clearer that it is a list.
image

@Simrayz Simrayz requested a review from hmpf September 2, 2025 08:39
@Simrayz Simrayz merged commit a559b37 into master Sep 2, 2025
16 checks passed
@Simrayz Simrayz deleted the chore/replace-foundation-tooltips branch September 2, 2025 16:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@johannaengland johannaengland johannaengland approved these changes

@hmpf hmpf Awaiting requested review from hmpf

Assignees

@Simrayz Simrayz

Labels

cleanup discussion Requires developer feedback/discussion before implementation javascript

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Replace foundation tooltips with custom implementation

3 participants

@Simrayz @hmpf @johannaengland