1140, Replace QTip2 with Hint.css

[chahmedejaz]

Hi there!
This PR replaces the QTips2 package functionality with the Hint.css as per issue #1140.
Here are the results after the replacement:

Here's the point to be noted:
Previously we were showing the formatted error message for the repository URL input field error:

However, the hint.css package doesn't support the html tags in the tooltip body. Due to this limitation, we are now showing the error message in plain text:

[mlinksva]

Thanks @chahmedejaz! I tried it out and have a few comments.

First, something changed with the /appendix page; the green/blue/red circles are now flush to the left of their table cells, rather than centered:

Second, in a very narrow browser window, the tooltips get cut off; this is not a huge deal as it was the case for the existing site until very recently #1133 but it'd be nice not to regress:

Third and least importantly, light text on darker color background (taken from the current heading?) strikes me as harder to read than darker color text on light color background (like the current message). Added: I might be wrong, guess it's a matter of taste.

[chahmedejaz]

Thank you @mlinksva for the review. Let me address the comments and get back to you 😄

[chahmedejaz]

Hey @mlinksva - I've addressed your comments. Please review the fixes.

• first comment
• second comment
• third comment

Results:
Now the tooltip is responsive:

Tooltip colors:

The appendix page is as per the original site now:

Please let me know if I'm missing anything. Thanks.

[mlinksva]

The screenshots look good, but when I run it, the tooltips have odd shadow or doubled text:

This is on a Mac FWIW, but I get the same on both Firefox and Chrome.

Any idea what could be causing that?

[chahmedejaz]

@mlinksva -

• Actually this effect is from the hint.css
• It is putting the shadow on the tool-tip body text and causing the doubled-text effect
• I've overridden this shadow to none for our use and hopefully it will do the fix
• It's putting the shadow at my end as well but apparently it's more prominent at your end 😅

Result:

[chahmedejaz]

Hey @mlinksva - I've addressed your comments, please review. Thanks.

[chahmedejaz]

I noticed that the tooltip arrow colors were lost due to the new color class names. Updated the arrow color for the new classes here

[mlinksva]

Excellent, all looks like it's working. One final comment: think we could avoid vendoring hint.css source

[mlinksva]

🎉 @chahmedejaz, well done and thanks