Hint.css for our Tooltips instead of QTips2

[mathetos]

While QTip is a good library, it's heavily JS based. When tiny JS errors that we can't control happen on the form page the QTips often just break.

Hint.css is pure CSS based. Of course there's potential that themes might mess with it in one way or another, but their repo is very active and they put a lot of attention on making their styles very strict in to avoid conflicts like that. Plus it would make styling them very easy.

@DevinWalker would love your input.

[DevinWalker]

I'm more in the mind set to not switch from qtip2 for a few reasons:

• "Tiny" JS errors will cause more issues than just the tooltips breaking
• Pure CSS based solutions may result in more theme / plugin conflicts and support request
• Unnecessary added development time with minimal gain
• Some DEVs may have customized the tooltips to suit their needs already breaking backwards compatibility
• The size between the two isn't too much of a bonus:
  • qtip2 full loaded (we aren't loading all modules) Approximate filesize_: 95KB (38KB minified / 20KB gzipped)_ Excludes jQuery library
  • hint.css is 2kb - so it's a ~40kb savings which in this day and age isn't all that much

[mathetos]

We're reconsidering this primarily because we've uncovered a couple sites in which the qtip library broke the JS on a page for a client, causing issues with the functionality of the page.

Using a CSS method would necessarily open up potential theme conflicts, but hint.css is built in a way to do its best to avoid that problem overall.

Additionally, hint.css relies on aria-label to populate the hints which is a good practice for #a11y improvements. To address Devin's concerns above, here's why:

• "Tiny" JS errors will cause more issues than just the tooltips breaking
  • New information says that qtip is causing breakage with other plugins/themes
• Pure CSS based solutions may result in more theme / plugin conflicts and support request
  • Hint.css really seems designed to account for exactly this use-case. It's possible there could still be problems, but overall we can do thorough theme testing and provide simple CSS tweaks in Support if necessary.
• Unnecessary added development time with minimal gain
  • Since qtips is causing problems consistently, the gain is that we'd avoid these problems, creating a better user experience with Give. If the CSS breaks, it doesn't break the whole page -- that's the BIGGEST gain in this move.
• Some DEVs may have customized the tooltips to suit their needs already breaking backwards compatibility
  • I think this is highly unlikely and not a primary concern. Though we could allow for hint.css to ALSO target our current data-attributes for backwards compatibility.
• The size between the two isn't too much of a bonus.
  • Still, across big site with a lot of traffic, and considering the rendering time saved as well, it's still beneficial.

The BIGGEST reason though is if CSS breaks, it doesn't break the page like Qtip currently does. It'll trim up our JS file a bit, including the give-ajax file. I think it's a win.

[mathetos]

Here's another example of a Give form getting ruined because of a plugin conflict with qTip:

https://wordpress.org/support/topic/give-donation-total-not-updating/

Would love to see this bumped up to 1.7 if possible.

[mathetos]

I dug into this a bit today, here's an example of what it would take to make this happen.

Here's the current markup of the "First Name" input hint

Current Markup

<span class="give-tooltip give-icon give-icon-question" data-tooltip="<?php esc_attr_e( 'We will use this to personalize your account experience.', 'give' ); ?>"></span>

With Hint.css Instead

<span class="hint--top" aria-label="<?php esc_attr_e( 'We will use this to personalize your account experience.', 'give' ); ?>"><i class="give-tooltip give-icon give-icon-question"></i></span>

Screenshot

Items to Consider

Here's a couple other items I found useful:

• Hint.css is built with sass, so we can actually prefix the whole library with one line of code. That will help with other potential CSS conflicts if other plugins are also using hint.css
• It's really clear that "aria-label" is implemented in hint.css specifically for accessibility reasons. See here: Screen reader testing chinchang/hint.css#81 -- I think this makes it a very elegant solution.
• There are themes and styles that we can customize via sass, so no need to get hung up on the appearance for now. But it opens up possibilities to add settings related to hint styles relatively easily as well.
• We should consider enqueuing this library separately perhaps, just for the instance of allowing users to create their own hint.css libraries and enqueueing them independtly instead of ours being lumped into give.min.css

[mathetos]

@DevinWalker What do you think about enqueueing hint.css separately from give.min.css? I think it would be useful for those users who want to apply their own hint.css styles to be able to just unequeue ours and enqueue their own. The additional HTTP request isn't as severe an issue as it used to be, particularly with HTTP/2 already rolling out.

[DevinWalker]

I'm fine with that. I want to load scripts conditionally as well.

…

On Mon, Dec 26, 2016 at 11:45 AM, Matt Cromwell ***@***.***> wrote: @DevinWalker <https://github.com/DevinWalker> What do you think about enqueueing hint.css separately from give.min.css? I think it would be useful for those users who want to apply their own hint.css styles to be able to just unequeue ours and enqueue their own. The additional HTTP request isn't as severe an issue as it used to be, particularly with HTTP/2 already rolling out. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#619 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABf7M43Z9IC-UcKPr8GlYtoh5O9xzBgBks5rMBk9gaJpZM4IiimF> .

-- Devin Walker Founder & Lead Developer P: 858-449-6460 <8584496460> W: https://wordimpress.com 433 G Street #201 San Diego, CA 92101 <https://goo.gl/maps/BePgp> <https://www.facebook.com/wordimpressive> <https://twitter.com/wordimpress> <https://plus.google.com/u/0/b/117062083910623146392/+Wordimpress/about> <http://wordimpress.com/>