Bye bye Qtip2 and hello Hint.css Tooltips #1596

DevinWalker · 2017-03-29T23:50:57Z

Description

Fixed conflict from: #1376

Resolves #619 and submitted specifically to release/1.9

Does the following:

Removed qtips from being enqueued anywhere
Removes qtips from bower, and any pre-processing tools
Removes qtips from tests
Removes qtips markup throughout the plugin
Adds hint.css to be enqueued via Admin and frontend
Adds hint.css markup throughout the plugin
No strings were changed at all.

There's room for improving this implementation of hint.css to give users more flexibility, but this PR is just about replacing qtips with hint.css out of the box. Additional features can come later.

I tested each individual tooltip in the Admin and front-end. If we merge this, these changes will have to be done in Add-ons as well.

Items check for compatibility

Screenshots (jpeg or gifs if applicable):

Types of changes

Code improvement
Compatibility improvement
Performance improvement

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows has proper inline documentation.

Syncing up Release/1.9

…screen.

…athetos-release/1.9 # Conflicts: # assets/css/give-admin-rtl.css # assets/css/give-admin-rtl.min.css # assets/css/give-admin.css # assets/css/give-admin.min.css # assets/js/admin/admin-scripts.min.js # assets/js/frontend/give.all.min.js # assets/sourcemaps/give-admin.css.map # assets/sourcemaps/give.css.map # includes/forms/template.php # templates/give-rtl.css # templates/give-rtl.min.css # templates/give.css # templates/give.min.css

* release/1.8.6: Thou shalt not support PHP 5.2 Improved payment status language Reordered to fix travis error Attempting to fix broken PHPunit tests Fix: typo in currency section setting Fix: generate level class and id with price_id instead of fix #1592 Update README.md Update Documentation. Text update Removed duplicate returns array of objects Return “all” rather than empty to prevent conflicts with level ID 0 Remove space Prettier nonce failure notice #1571 Code reformatting Removed unused variables Removed unused code #1571 # Conflicts: # assets/js/admin/admin-scripts.min.js

* master: (36 commits) New POT file for 1.8.6 Gulp Additional adjustments to responsive handling #1544 Typo fix Basic fix for responsive dropdown #1544 Versions updated and readme added for 1.8.6 Removing during tests Still testing Remove codesniffer for now Updating composer.json to fix 7.1 error New .gitattributes file export ignore file - brought over from Woo New PHPCS ruleset - brought over from Woo Fix: stop firing additional ajax request while choosing form for exporting donors Fix: php notices which comes when requesting for form levels by ajax Update: run gulp concat_scripts Add: global js to toggle terms Remove: inline toggle term and conditions js Fix: improve code formatting Fix: php compatibility releated issue of code Update: should be an array Refacter: multi donation form payment test ... # Conflicts: # assets/css/give-admin-rtl.min.css # assets/css/give-admin.min.css # assets/js/admin/admin-scripts.min.js # assets/js/frontend/give.all.min.js # assets/sourcemaps/give-admin.css.map

ravinderk · 2017-04-28T06:21:51Z

@DevinWalker I reviewed this PR and find following issues:

1. The tooltip content max width is not set.

before

after

2 . The tooltip is not showing for the wrong amount.

before

after

3. The tooltip is not mobile friendly.

before

after

4. The tooltip is not working on the donation listing page.

before

after

5. The tooltip is not working on the donation detail page.

before

after

6. The tooltip is not working on the logs page.

before

after

7. The tooltip is not working on the reports page.

before

after

8. The tooltip is not working on the system info page.

before

#### after

Note To resolve point 3 we can look this example https://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

DevinWalker · 2017-06-13T04:36:28Z

Requirements for Merging

1. Tooltips are backwards compatible with the current qtip2 ones. - [ ]

Perhaps this can be completed by detecting the current dom class/attributes with qtips and initializing hint.css rather.

2. Remove the usage of the word "fake" throughout the PR - [ ]

I understand we're simply extending hint.css so it can be prefixed with simply "Give"

ravinderk · 2017-06-13T06:59:31Z

@DevinWalker Both point fixed.
For example:
I tested Qtip backward compatibility with https://github.com/WordImpress/Give-Form-Field-Manager.
Here are some screenshots.

But hint.css can face some problem with overflow:hidden property.
You can see some of the tooltip hidden within div but we can fix this problem by changing their position.
for ref: chinchang/hint.css#78
For example:
Before

After

ravinderk

@DevinWalker This PR is working fine for me

Resolved Conflict: give.php

mathetos and others added 20 commits January 4, 2017 18:30

Merge pull request #1 from WordImpress/release/1.9

daaa008

Syncing up Release/1.9

Removing all qtip JS and CSS files from being enqueued at all.

c0afd08

Remove qtip from the gulp.js file

f6ed893

Remove qtip.scss from assets/plugins

c3ea71c

Add hint.css to gulp and bower files.

69989a2

Remove qtip JS files completely.

43014d0

General implementation of hint.css throughout assets.

64e3d3f

Completely remove qtip.css from assets

1b1453c

Remove qtips from admin-scripts.js

3e3752c

hint.css customizations

24cb2d6

Markup changes implemented for the Admin System Info Page

2393f31

Added markup for tooltip on the donation details screen.

7080659

Added markup for gateway error list table tooltips.

7e2bda7

Added tooltip markup for the "Refresh Reports" button on the reports …

287bbbc

…screen.

Added tooltip markup for all tooltips on the Donations screen.

5236556

Added tooltip markup to the Donations Logs screen.

6b5b9cf

Added markup for all frontend tooltips.

8b96b75

Fix unit test searching for qtip.scss

d7cd530

Resolve conflicts with current 1.9.

a3feaed

DevinWalker self-assigned this Mar 29, 2017

Devin Walker added 4 commits March 29, 2017 17:10

Removed leftover qtip tooltip code

c4afd09

Ran gulp

df9112f

DevinWalker closed this Apr 14, 2017

DevinWalker changed the base branch from release/1.9 to release/2.0 April 14, 2017 04:41

DevinWalker reopened this Apr 14, 2017

Merge branch 'release/1.8.7' into mathetos-release/1.9

7d1bc62

ravinderk added 8 commits June 12, 2017 12:36

Refactor: render help tooltip with Give_Tooltips pass2

6c4e0d2

Refactor: remove give_tooltip default class

0300c5b

Refactor: render help tooltip with Give_Tooltips pass3

7b972dc

add: rel tootltip attribute

8961087

Merge branch 'release/2.0' into mathetos-release/1.9

caec1f2

Add: fake hint js

2f898e8

Fix: sanitize amoutn before showing on frontend

61818d5

Add: fake hint js pass2

5c70c01

DevinWalker removed their assignment Jun 13, 2017

ravinderk added 3 commits June 13, 2017 10:14

Refactor: remove fake from custom hint.css js

9cf0823

Fix: add backward compatibility for qtip

1d37520

Refactor: remove fake from custom hint.css js pass2

daa31f8

ravinderk added 6 commits June 13, 2017 15:55

Fix: Modify edit email link tooltip to hintcss

42c342b

Fix: allow string param when render span tooltip

b511cc8

Fix: add missing email api refactor js

8e78cfb

Add: give_get_attribute_str helper function

976b8d5

Fix: email listing page tooltip issues

35ed4bf

Refactor: use core function to get attribute string

df174b9

DevinWalker added ready and removed in progress labels Jun 13, 2017

ravinderk approved these changes Jun 21, 2017

View reviewed changes

DevinWalker added 5 commits June 22, 2017 19:00

Merge branch 'release/2.0' into mathetos-release/1.9

686c0ea

Resolved Conflict: give.php

Merge branch 'release/1.8.9' into mathetos-release/1.9

d5d9e05

Merge branch 'release/2.0' into mathetos-release/1.9

9b09d8f

Merged changes from 1.8.9 core loading

f38ed16

Merged from 1.8.9

b8a70b6

DevinWalker merged commit 20bf7d2 into release/2.0 Jun 22, 2017

DevinWalker deleted the mathetos-release/1.9 branch June 25, 2017 09:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bye bye Qtip2 and hello Hint.css Tooltips #1596

Bye bye Qtip2 and hello Hint.css Tooltips #1596

DevinWalker commented Mar 29, 2017 •

edited

Loading

ravinderk commented Apr 28, 2017 •

edited

Loading

DevinWalker commented Jun 13, 2017

ravinderk commented Jun 13, 2017

ravinderk left a comment

Bye bye Qtip2 and hello Hint.css Tooltips #1596

Bye bye Qtip2 and hello Hint.css Tooltips #1596

Conversation

DevinWalker commented Mar 29, 2017 • edited Loading

Description

Does the following:

Items check for compatibility

Screenshots (jpeg or gifs if applicable):

Types of changes

Checklist:

ravinderk commented Apr 28, 2017 • edited Loading

1. The tooltip content max width is not set.

before

after

2 . The tooltip is not showing for the wrong amount.

before

after

3. The tooltip is not mobile friendly.

before

after

4. The tooltip is not working on the donation listing page.

before

after

5. The tooltip is not working on the donation detail page.

before

after

6. The tooltip is not working on the logs page.

before

after

7. The tooltip is not working on the reports page.

before

after

8. The tooltip is not working on the system info page.

before

DevinWalker commented Jun 13, 2017

Requirements for Merging

1. Tooltips are backwards compatible with the current qtip2 ones. - [ ]

2. Remove the usage of the word "fake" throughout the PR - [ ]

ravinderk commented Jun 13, 2017

ravinderk left a comment

Choose a reason for hiding this comment

DevinWalker commented Mar 29, 2017 •

edited

Loading

ravinderk commented Apr 28, 2017 •

edited

Loading