Stirling-PDF icon indicating copy to clipboard operation
Stirling-PDF copied to clipboard

refactor: tooltips behavior and tooltips in bookmark editor

Open lukasstorck opened this issue 4 months ago • 0 comments

Description of Changes

  • rewrote the tooltip setup function and how Stirling-PDF tooltips work

    • before there were DOM elements for each tooltip with fixed text, which are shown/hidden based on mouseenter, mousemove and mouseleave events
      <div class="btn-tooltip">
          Merge, Rotate, Rearrange, Split, and Remove pages
      </div>
      <div class="btn-tooltip">...</div>
      <div class="btn-tooltip">...</div>
      ...
      <div class="btn-tooltip">...</div>
      
    • now there is only one of these <div> containers, which is shown and hidden as before, but the text is updated to reflect the tooltip text of the currently hovered element
    • I added a click event listener, which also hides the tooltip (like mouseleave) for cases, where the DOM changes such that the mouse is no longer hovering the target element, but no mouseleave event is triggered
  • the bookmark editor now uses this custom tooltip system instead of the visually different system by Bootstrap

    • My guess is, that using the Boostrap system was a quick fix, as the previous version of the Stirling-PDF tooltip system was not compatible. When the DOM changes the reference to an old tooltip element is (somehow) lost and is therefor not hidden on mouseleave. Additionally it would always create more <div> containers for every re-render of the bookmarks.
    • there is a comment suggesting to use the Stirling-PDF tooltip system, but also comments explicitly stating the use of Bootstrap
  • while the 92+ tooltip elements do not pose any performance impact, I think it is cleaner to have only one element that is updated as there also should ever only be one tooltip needed at a given time

  • the tooltipSetup() function is defined in navbar.js and only loaded, when the navbar is loaded, which is probably always, but maybe there is a better place for a global system like that?

    • it is added as a global variable window.tooltipSetup = tooltipSetup;
    • if the view port has a width < 1200, tooltips are not rendered, which is probably fine, unless you are testing it in a browser with the dev tools open, such that the window is too small and you wonder, why the changes aren't working... :/

Checklist

General

Documentation

UI Changes (if applicable)

  • [x] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR)
    before: Tooltip in Bookmark Editor Before after: Tooltip in Bookmark Editor After

Testing (if applicable)

  • [x] I have tested my changes locally. Refer to the Testing Guide for more details.

lukasstorck avatar Aug 07 '25 13:08 lukasstorck