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.

Support from Acquia helps fund testing for Drupal Acquia logo

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

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

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/

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

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.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.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.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.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.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.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.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.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mgifford’s picture

larowlan’s picture

I think we should be looking at the popover API here now it looks like there will be a web standard for this

mgifford’s picture

Issue tags: +tooltips

Sorry, what AIP @larowlan?

Also tagging for tooltips as there are a few of these?

larowlan’s picture

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover starting to see browser support for this and there's a polyfill