Replace Qtip Library with Floating ui by milospp · Pull Request #439 · vivo-project/Vitro

milospp · 2024-01-30T20:54:37Z

VIVO GitHub issue: 3931
Linked VIVO PR

What does this pull request do?

This pull request focuses on the removal of the Qtip library from the project, substituting it with Floating ui Library. The design has been configured to maintain similarity with the previous implementation using Qtip.

Only the Vitro part of PR is mandatory for the popper to work, other changes in Vitro and VIVO PR are only to initiate tooltip and style it.

What's new?

The Popper tooltip automatically identifies available screen space for display.

Before:

After:

How should this be tested?

On the Individual profile page:

Hover, Research area icon (#researchAreaIcon)
Click, Contanct Info link icon (#uriIcon)

On the Search results page:

Click, download icon (#downloadIcon)

On the MapOfScience page:

Hover over next elements, #mageIconOne, #exploreInfoIcon, #compareInfoIcon, #imageIconThree

Additional Notes:

This pull request may impact dependencies, as it involves the removal of the Qtip library and the addition of Popper. Please be mindful of potential issues in this regard.

Interested parties

@VIVO-project/vivo-committers

gneissone

Please see review vivo-project/VIVO#3937 (review) for general remarks.

These changes work well with Wilma, but do not work with the default vitro template since vitro does not include bootstrap. Wonder if the tooltips can just be dropped completely in the vitro template, since it was intended to be minimal in the first place...

litvinovg · 2025-01-09T13:26:00Z

webapp/src/main/webapp/themes/vitro/css/vitroTheme.css

    margin-top: .5em;
 }
+
+.show {


Could you tell me where this css class is used?

When I tried to upgrade to Bootstrap 5 this was a fix to handle the tabs section. Bootstrap automatically adds "show" class to the tab of the panel that needs to show.
Since the bootstrap 5 upgrade is reverted from this PR, this is actually useless and I will remove it.

webapp/src/main/webapp/js/tooltip/tooltip-utils.js

litvinovg · 2025-01-09T14:44:07Z

Doesn't work on Vitro for some reason.

milospp · 2025-01-23T19:21:17Z

Doesn't work on Vitro for some reason.

I couldn't reproduce the same bug, can you please provide more information on when this bug happened?

litvinovg · 2025-01-24T08:33:42Z

Doesn't work on Vitro for some reason.

I couldn't reproduce the same bug, can you please provide more information on when this bug happened?

Sure. Just build Vitro, create any individual, open page profile and notice error in console.

milospp · 2025-01-24T09:54:25Z

Doesn't work on Vitro for some reason.

I couldn't reproduce the same bug, can you please provide more information on when this bug happened?

Sure. Just build Vitro, create any individual, open page profile and notice error in console.

https://youtu.be/X56Hxjf6seI
This is what I got, ignore those two errors, it is related to the LastPass Chrome extension.
Can you confirm whether I reproduced the steps correctly? If yes can you please try again but try to hard reload the page (Ctrl + F5 in Chrome) after building

litvinovg · 2025-01-24T10:16:29Z

Doesn't work on Vitro for some reason.

I couldn't reproduce the same bug, can you please provide more information on when this bug happened?

Sure. Just build Vitro, create any individual, open page profile and notice error in console.

https://youtu.be/X56Hxjf6seI This is what I got, ignore those two errors, it is related to the LastPass Chrome extension. Can you confirm whether I reproduced the steps correctly? If yes can you please try again but try to hard reload the page (Ctrl + F5 in Chrome) after building

First step is to build Vitro, not VIVO.

litvinovg · 2025-01-27T07:19:42Z

Doesn't work on Vitro for some reason.

I couldn't reproduce the same bug, can you please provide more information on when this bug happened?

Sure. Just build Vitro, create any individual, open page profile and notice error in console.

https://youtu.be/X56Hxjf6seI This is what I got, ignore those two errors, it is related to the LastPass Chrome extension. Can you confirm whether I reproduced the steps correctly? If yes can you please try again but try to hard reload the page (Ctrl + F5 in Chrome) after building

First step is to build Vitro, not VIVO.

@milospp Did you manage to reproduce the issue?
You were building and deploying VIVO with Vitro theme, instead build and install Vitro application.

milospp · 2025-01-28T14:21:51Z

d deploying VIVO with Vitro theme, instead build and install Vitro application.

Yes, I reproduced it. I just didn't work on it until now. I updated the code. Can you check it out now?

litvinovg · 2025-01-30T08:35:09Z

I don't think the tip is supposed to appear in that place

milospp · 2025-02-14T13:45:32Z

I don't think the tip is supposed to appear in that place

Fixed

litvinovg

Looks good to me.

gneissone

Working well, thanks.

* Replaced Qtip with Popper and bootstrap * Removed Qtip libraries and modifies style for tooltip * Fixed position of download popup * Fixed popper for Vitro, Nemo and Tenderfoot themes * Fixed tooltip design and nemo theme search results page * Removed !important tags * Fixed opacity difference * Created tooltip css for everytheme to reduce reduntant code * Renamed vivoToolip to vitroTooltip * Refactored code * Adding bootstrap-5.3.2 * Added padding in tooltip * Removed bootstrap * Removed bootstrap * excluded bootstrap from popper * Refactored code * Refactor popper code * Added floating webjar * Migraiton popper to floating * Refactored code, divided in smaller functions * Fixed arrows * Deleted unused popper library * Replace word 'popper' from variables with tooltip * Removed test logs * Improved readability for tooltip functions * Added tooltip-utils.js into vitro individual ftl * Fixed missplaced popper in vitro

milospp mentioned this pull request Jan 30, 2024

Replace Qtip Library with Floating ui vivo-project/VIVO#3937

Merged

chenejac requested a review from gneissone January 31, 2024 09:02

chenejac linked an issue Feb 6, 2024 that may be closed by this pull request

Replace qtip dependency vivo-project/VIVO#3931

Closed

gneissone requested changes Feb 7, 2024

View reviewed changes

chenejac requested a review from gneissone February 13, 2024 09:32

chenejac marked this pull request as draft April 12, 2024 11:05

milospp marked this pull request as ready for review November 20, 2024 00:30

milospp force-pushed the fix-tooltip branch 2 times, most recently from 51646ef to ddddae7 Compare December 8, 2024 22:21

milospp added 14 commits December 9, 2024 15:54

Replaced Qtip with Popper and bootstrap

d99fbbd

Removed Qtip libraries and modifies style for tooltip

81d1a1f

Fixed position of download popup

297afc1

Fixed popper for Vitro, Nemo and Tenderfoot themes

ba6162c

Fixed tooltip design and nemo theme search results page

187b91b

Removed !important tags

12ed8b5

Fixed opacity difference

4949f0c

Created tooltip css for everytheme to reduce reduntant code

47cb0f2

Renamed vivoToolip to vitroTooltip

d2d7884

Refactored code

a6b9b9e

Adding bootstrap-5.3.2

96a22a2

Added padding in tooltip

ec4b39e

Removed bootstrap

641146d

Removed bootstrap

ee61e74

milospp force-pushed the fix-tooltip branch from ddddae7 to ee61e74 Compare December 9, 2024 14:55

milospp added 3 commits December 10, 2024 10:05

excluded bootstrap from popper

f0db4ce

Refactored code

f53c863

Refactor popper code

5d6354a

milospp changed the title ~~Replace Qtip Library with Bootstrap Tooltip~~ Replace Qtip Library with Popper Dec 10, 2024

milospp added 2 commits December 11, 2024 13:04

Added floating webjar

5127bca

Migraiton popper to floating

a463177

Fixed arrows

3ec0d79

milospp changed the title ~~Replace Qtip Library with Popper~~ Replace Qtip Library with Floating ui Dec 11, 2024

milospp added 2 commits December 17, 2024 13:11

Deleted unused popper library

d047f30

Replace word 'popper' from variables with tooltip

6b6e091

chenejac requested a review from litvinovg December 23, 2024 09:39

litvinovg reviewed Jan 9, 2025

View reviewed changes

webapp/src/main/webapp/js/tooltip/tooltip-utils.js Outdated Show resolved Hide resolved

litvinovg reviewed Jan 9, 2025

View reviewed changes

webapp/src/main/webapp/js/tooltip/tooltip-utils.js Show resolved Hide resolved

litvinovg reviewed Jan 9, 2025

View reviewed changes

webapp/src/main/webapp/js/tooltip/tooltip-utils.js Outdated Show resolved Hide resolved

litvinovg reviewed Jan 9, 2025

View reviewed changes

webapp/src/main/webapp/js/tooltip/tooltip-utils.js Outdated Show resolved Hide resolved

Removed test logs

f9c5f7b

Improved readability for tooltip functions

6fc495e

Added tooltip-utils.js into vitro individual ftl

d6abb7b

Fixed missplaced popper in vitro

d624a56

chenejac requested a review from litvinovg February 20, 2025 10:24

litvinovg approved these changes Mar 3, 2025

View reviewed changes

chenejac requested review from tamu-sad-iii and removed request for tamu-sad-iii March 18, 2025 09:03

gneissone approved these changes Mar 19, 2025

View reviewed changes

litvinovg merged commit 54d1943 into vivo-project:main Mar 20, 2025
1 check passed

Conversation

milospp commented Jan 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this pull request do?

What's new?

Before:

After:

How should this be tested?

Additional Notes:

Interested parties

Uh oh!

gneissone left a comment

Choose a reason for hiding this comment

Uh oh!

litvinovg Jan 9, 2025

Choose a reason for hiding this comment

Uh oh!

milospp Jan 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

litvinovg commented Jan 9, 2025

Uh oh!

milospp commented Jan 23, 2025

Uh oh!

litvinovg commented Jan 24, 2025

Uh oh!

milospp commented Jan 24, 2025

Uh oh!

litvinovg commented Jan 24, 2025

Uh oh!

litvinovg commented Jan 27, 2025

Uh oh!

milospp commented Jan 28, 2025

Uh oh!

litvinovg commented Jan 30, 2025

Uh oh!

milospp commented Feb 14, 2025

Uh oh!

litvinovg left a comment

Choose a reason for hiding this comment

Uh oh!

gneissone left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

milospp commented Jan 30, 2024 •

edited

Loading