Coming from #1849610-48: Improve "add" links accessibility I realized how important it would be to have a consistent way to have some sort of tooltip functionality without relying on a link title attribute like we do now.

There are a few problems with tooltips:
http://stevenclark.com.au/2008/06/30/title-attributes-on-links-tooltips-...

Often though it comes down to simply duplicating the information provided to a screen reader user. There's also an issue about how support for titles isn't consistent across different Assistive Technology:
http://www.paciellogroup.com/resources/articles/WE05/forms.html

But there is an approach to do this with jQuery which is themable & has been tested for accessibility:
http://api.jqueryui.com/tooltip/

What I'd like to see though is that the tooltip or title doesn't replace the information provided to screen readers with text hidden by element-invisible.

Having a common API that can be leveraged & extended would help Core & other modules.

Files: 
CommentFileSizeAuthor
#12 css-tooltips-1919940-12.patch835 bytesmgifford
PASSED: [[SimpleTest]]: [MySQL] 59,787 pass(es). View
#8 css-tooltips-1919940-8.patch832 bytesBarisW
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch css-tooltips-1919940-8.patch. Unable to apply patch. See the log in the details link for more information. View
#8 drupal-tooltips.png31.92 KBBarisW

Comments

mgifford’s picture

Issue tags: +jQuery UI, +D8UX usability

Adding tags, but also thinking how important this is for usability, especially for things like Views.

mgifford’s picture

Title: Replace Links with Title Attributes with Proper Accessible, Themable Tooltops » Build API to Replace Links using Title Attributes with Proper Accessible, Themable Tooltips

Realized I needed to change the title.

mgifford’s picture

sun’s picture

Any solution that requires JavaScript is a no-go.

falcon03’s picture

@sun#4, can I ask the reason why?

If we used JQuery UI tooltip we wouldn't have to add any new library to core: it's already in place. I am not saying that JQuery UI tooltip is the solution, just that we should consider it! :-)

sun’s picture

Do not try to re-implement responsibilities of user agents in custom code.

The moment you try to do that, you end up with senseless functionality like Overlay and a never-ending stack of bug reports caused by the incomplete and insufficient user-space functionality.

Properly dealing with and exposing title attributes is the domain and responsibility realm of web browsers/user agents.

It is not Drupal's business nor in Drupal's interest to re-invent native browser functionality.

mgifford’s picture

Hey @sun those are great points.

Sadly the title attribute is really not all that helpful in most browsers. I can see that having these done right in the browser is really the right place to do it, but it's currently a bit of a mess:
https://bugzilla.mozilla.org/buglist.cgi?quicksearch=tooltip&list_id=631...

It's definitely more complicated with accessibility though as VoiceOver, JAWS & NVDA really aren't working on the same standards.

I also don't see any way to pass along theming information to a browser. Right now the default browser tooltips look pretty lame and only work if you hover over with a mouse.

That being said, I don't want to see another Overlay like functionality added to Core. That being said, it's something that the community thought was useful.

BarisW’s picture

Status: Active » Needs review
FileSize
31.92 KB
832 bytes
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch css-tooltips-1919940-8.patch. Unable to apply patch. See the log in the details link for more information. View

It /can/ be done using pure CSS, as seen here: http://forrst.com/posts/Simple_pure_CSS_tooltip_with_arrow-BkY

See patch for a demo in Drupal. Not ideal (as placements still needs some work) yet, but it gives an idea.

The last submitted patch, css-tooltips-1919940-8.patch, failed testing.

BarisW’s picture

Status: Needs work » Needs review

#8: css-tooltips-1919940-8.patch queued for re-testing.

Status: Needs review » Needs work
Issue tags: +accessibility, +jQuery UI, +tooltip, +D8UX usability

The last submitted patch, css-tooltips-1919940-8.patch, failed testing.

mgifford’s picture

Status: Needs work » Needs review
FileSize
835 bytes
PASSED: [[SimpleTest]]: [MySQL] 59,787 pass(es). View

Just a re-roll for the bot. I couldn't apply using git either.

@sun - I don't know if this addresses your concern though.

mgifford’s picture

I don't see how this is going to work with just CSS.

Now you could add support for :focus as well as :hover so at least you wouldn't need a mouse to see it.

However, I don't see how to remove the browser from displaying the title="" without using javascript to swap it out and replace it entirely with something else based on that text it just removed.

Some D7 modules for this:
http://drupal.org/project/qtip
http://drupal.org/project/beautytips
http://drupal.org/project/views_tooltip
http://drupal.org/project/tipsy

Too bad the browsers do such a crappy job....

mgifford’s picture

#12: css-tooltips-1919940-12.patch queued for re-testing.

Status: Needs review » Needs work

The last submitted patch, css-tooltips-1919940-12.patch, failed testing.

mgifford’s picture

Status: Needs work » Needs review
Issue tags: +accessibility, +jQuery UI, +tooltip, +D8UX usability

#12: css-tooltips-1919940-12.patch queued for re-testing.

mgifford’s picture

Version: 8.x-dev » 9.x-dev
Status: Needs review » Active
Issue tags: -D8UX usability +#d8ux, +D9UX usability

I'm thinking of bumping this ahead to D9. If it can be brought into D8, great, but this is going to have to be part of a greater UX vision. I don't know that a CSS only solution is going to be accessible as even if a screen reader can read the title of a link, generally I understand that they aren't set to read the title.

mgifford’s picture

Version: 9.x-dev » 8.x-dev

Switching it back to D8 for now, I'd thought I'd done that.

mgifford’s picture

Status: Active » Needs review
Issue tags: -accessibility, -jQuery UI, -tooltip, -#d8ux, -D9UX usability

#12: css-tooltips-1919940-12.patch queued for re-testing.

Status: Needs review » Needs work

The last submitted patch, css-tooltips-1919940-12.patch, failed testing.

mgifford’s picture

Status: Needs work » Needs review

#12: css-tooltips-1919940-12.patch queued for re-testing.

mgifford’s picture

#12: css-tooltips-1919940-12.patch queued for re-testing.

mgifford’s picture

12: css-tooltips-1919940-12.patch queued for re-testing.

Status: Needs review » Needs work

The last submitted patch, 12: css-tooltips-1919940-12.patch, failed testing.

mgifford’s picture

Status: Needs work » Needs review

12: css-tooltips-1919940-12.patch queued for re-testing.

mgifford’s picture

Version: 8.x-dev » 9.x-dev
Issue summary: View changes
sun’s picture

Component: system.module » theme system
LewisNyman’s picture

Looks like we implemented a CSS only solution in #2207383: Create a tooltip component without knowledge of this issue. I would love some feedback on this direction.

catch’s picture

Version: 9.x-dev » 8.1.x-dev
LewisNyman’s picture

Status: Needs review » Postponed
mgifford’s picture

Status: Postponed » Needs review

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.0-beta1 was released on March 2, 2016, which means new developments and disruptive changes should now be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

mgifford’s picture

Status: Needs review » Needs work

The last patch was from 4 years ago, so marking this as "Needs work"

mgifford’s picture

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

BarisW’s picture

Issue tags: +SprintWeekend2017a11y
mgifford’s picture

I'm just trying to unpack the MindPatterns code here http://ianmcburnie.github.io/mindpatterns/tooltip/

Some pretty straight forward HTML:

<span class="tooltip flyout--js tooltip--js" id="flyout-0">
  <a class="tooltip__trigger" href="http://www.ebay.com" aria-describedby="tooltip-0" aria-controls="tooltip-0">Add to Cart</a>
  <span class="tooltip__overlay" role="tooltip" id="tooltip-0">Your cart contains 6 items</span>
</span>

CSS:

.tooltip {
    position: relative;
}
.tooltip [role=tooltip] {
    background-color: LightYellow;
    border: 1px solid #eee;
    bottom: 100%;
    display: none;
    font-size: small;
    left: 0;
    padding: 0.25em 0.5em;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
}
.tooltip--expanded [role=tooltip] {
    display: block;
}

And some Javascript. I don't have any experience with https://jqueryui.com/tooltip/

$_mod.installed("jquery-tooltip$0.2.0","jquery","3.1.1");
!function(e){e.fn.tooltip=function(t){return t=e.extend({overlaySelector:".tooltip__overlay, [role=tooltip]",triggerSelector:".tooltip__trigger, [aria-describedby]"},t),this.each(function(){var o=e(this),r=(o.find(t.triggerSelector),{expandedClass:"tooltip--expanded",triggerSelector:t.triggerSelector,overlaySelector:t.overlaySelector});o.hoverFlyout(r).focusFlyout(r),o.addClass("tooltip--js")})}}(jQuery);
<script>
    $(function() {
        $('.tooltip').tooltip();
    });
</script>
mgifford’s picture

Just ran across this blog on the topic too:
https://sarasoueidan.com/blog/accessible-tooltips/