Stirling-PDF
Stirling-PDF copied to clipboard
refactor: tooltips behavior and tooltips in bookmark editor
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,mousemoveandmouseleaveevents<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
clickevent listener, which also hides the tooltip (likemouseleave) for cases, where the DOM changes such that the mouse is no longer hovering the target element, but nomouseleaveevent is triggered
- before there were DOM elements for each tooltip with fixed text, which are shown/hidden based on
-
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
- 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
-
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 innavbar.jsand 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... :/
- it is added as a global variable
Checklist
General
- [x] I have read the Contribution Guidelines
- [x] I have read the Stirling-PDF Developer Guide (if applicable)
- [ ] I have read the How to add new languages to Stirling-PDF (if applicable)
- [x] I have performed a self-review of my own code
- [x] My changes generate no new warnings
Documentation
- [ ] I have updated relevant docs on Stirling-PDF's doc repo (if functionality has heavily changed)
- [ ] I have read the section Add New Translation Tags (for new translation tags only)
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:after:
Testing (if applicable)
- [x] I have tested my changes locally. Refer to the Testing Guide for more details.