New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hint.css for our Tooltips instead of QTips2 #619

Closed
mathetos opened this Issue May 19, 2016 · 6 comments

Comments

Projects
None yet
3 participants
@mathetos
Member

mathetos commented May 19, 2016

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

This comment has been minimized.

Member

DevinWalker commented May 19, 2016

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

This comment has been minimized.

Member

mathetos commented Aug 5, 2016

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 mathetos reopened this Aug 5, 2016

@mathetos mathetos added this to the 1.7 milestone Aug 5, 2016

@DevinWalker DevinWalker changed the title from Consider using Hint.css for our Tooltips instead of QTips2 to Hint.css for our Tooltips instead of QTips2 Aug 16, 2016

@DevinWalker DevinWalker self-assigned this Aug 22, 2016

@DevinWalker DevinWalker modified the milestones: 1.9, 1.7 Sep 20, 2016

@mathetos mathetos added the a11y label Oct 31, 2016

@mathetos

This comment has been minimized.

Member

mathetos commented Nov 5, 2016

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

This comment has been minimized.

Member

mathetos commented Nov 5, 2016

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

hintcss_test_firstname

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: 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

This comment has been minimized.

Member

mathetos commented Dec 26, 2016

@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

This comment has been minimized.

Member

DevinWalker commented Dec 26, 2016

@mathetos mathetos referenced this issue Jan 5, 2017

Closed

Fixes #619 #1376

@DevinWalker DevinWalker referenced this issue Mar 29, 2017

Merged

Bye bye Qtip2 and hello Hint.css Tooltips #1596

1 of 9 tasks complete

@DevinWalker DevinWalker modified the milestones: 1.9, 2.0 Apr 10, 2017

@ravinderk ravinderk added the has pr label May 11, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment