Replace Qtip Library with Bootstrap Tooltip #3937
Conversation
There was a problem hiding this comment.
Works well with Wilma, excellent! I'm seeing an error with tenderfoot, however.
org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) at java.base/java.lang.Thread.run(Thread.java:840) Caused by: freemarker.core.ParseException: Syntax error in template "individual--foaf-person.ftl" in line 184, column 1: Encountered ")", but was expecting one of: <STRING_LITERAL> <RAW_STRING> "false" "true" <INTEGER> <DECIMAL> "." "+" "-" "!" "[" "(" "{" <ID> at
Seems there's an extra comma in that file. If I remove the comma the page loads, but it then complains about missing methods in the console, which I can resolve by adding tooltip-utils.js and popper.min.js to headscripts.ftl... but then it complains about bootstrap missing, which is as deep as I got :)
Seems like we should not break tenderfoot if we intend to continue distributing it with VIVO (are we...?)
I'm also not seeing any tooltips with nemo, but they seem broken without the changes, as well, so not worried about fixing that theme with this PR.
| @@ -181,19 +181,17 @@ ${stylesheets.add( | |||
| '<link rel="stylesheet" href="${urls.base}/css/individual/individual.css" />', | |||
| '<link rel="stylesheet" href="${urls.base}/css/individual/individual-vivo.css" />', | |||
| '<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.12.1.css" />', | |||
| '<link rel="stylesheet" type="text/css" href="${urls.base}/css/jquery_plugins/qtip/jquery.qtip.min.css" />' | |||
There was a problem hiding this comment.
The comma before needs removed as well or the freemarker template complains.
There was a problem hiding this comment.
Thanks for catching that! I've fixed it up, so please take a look when you get a chance. Appreciate it!
Completely overlooked testing on other themes since the decision to prioritize Wilma and phase out the others in the future. |
| /* TOOLTIP ----------------------------------------> */ | ||
| /* -------------------------------------------------> */ | ||
| .vivoTooltip { | ||
| opacity: 1 !important; |
There was a problem hiding this comment.
I think !important is the last resort and should be avoided everywhere if possible.
| /* -------------------------------------------------> */ | ||
| /* TOOLTIP ----------------------------------------> */ | ||
| /* -------------------------------------------------> */ | ||
| .vivoTooltip { |
There was a problem hiding this comment.
I would try to avoid style duplication, maybe it would be better to define styles once and include in all themes.
| },{ | ||
| querySelector: "#exploreInfoIcon", | ||
| data: { | ||
| title: "<div style='padding: 16px 22px; max-width: 400px;'>" + $('#exploreTooltipText').html() + "</div>", |
There was a problem hiding this comment.
The same in-lined styles defined multiple times. It would be better avoid inline styles, instead define in a css file
VIVO GitHub issue: 3931
Linked Vitro PR
What does this pull request do?
This pull request focuses on the removal of the Qtip library from the project, substituting it with Bootstrap's tooltip that utilizes Popper 2 as its underlying mechanism. The design has been configured to maintain similarity with the previous implementation using Qtip.
What's new?
The Bootstrap tooltip automatically identifies available screen space for display but is limited to top, bottom, left, and right orientations, excluding corners.
Before:
After:
How should this be tested?
On the Individual profile page:
On the Search results page:
On the MapOfScience page:
Additional Notes:
Interested parties
@VIVO-project/vivo-committers