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.
Comment | File | Size | Author |
---|---|---|---|
#12 | css-tooltips-1919940-12.patch | 835 bytes | mgifford |
#8 | css-tooltips-1919940-8.patch | 832 bytes | BarisW |
#8 | drupal-tooltips.png | 31.92 KB | BarisW |
Comments
Comment #1
mgiffordAdding tags, but also thinking how important this is for usability, especially for things like Views.
Comment #2
mgiffordRealized I needed to change the title.
Comment #3
mgiffordComing from #1874354-53: Rename current "link title" and add support for the true link title attribute thought I'd bring over these links:
http://hanshillen.github.com/jqtest/#goto_tooltip
http://wiki.jqueryui.com/w/page/12138112/Tooltip
Also mention that I marked that issue as a duplicate of this one.
Comment #4
sunAny solution that requires JavaScript is a no-go.
Comment #5
falcon03 CreditAttribution: falcon03 commented@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! :-)
Comment #6
sunDo 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.
Comment #7
mgiffordHey @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.
Comment #8
BarisW CreditAttribution: BarisW commentedIt /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.
Comment #10
BarisW CreditAttribution: BarisW commented#8: css-tooltips-1919940-8.patch queued for re-testing.
Comment #12
mgiffordJust a re-roll for the bot. I couldn't apply using git either.
@sun - I don't know if this addresses your concern though.
Comment #13
mgiffordI 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....
Comment #14
mgifford#12: css-tooltips-1919940-12.patch queued for re-testing.
Comment #16
mgifford#12: css-tooltips-1919940-12.patch queued for re-testing.
Comment #17
mgiffordI'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.
Comment #18
mgiffordSwitching it back to D8 for now, I'd thought I'd done that.
Comment #19
mgifford#12: css-tooltips-1919940-12.patch queued for re-testing.
Comment #21
mgifford#12: css-tooltips-1919940-12.patch queued for re-testing.
Comment #22
mgifford#12: css-tooltips-1919940-12.patch queued for re-testing.
Comment #23
mgifford12: css-tooltips-1919940-12.patch queued for re-testing.
Comment #25
mgifford12: css-tooltips-1919940-12.patch queued for re-testing.
Comment #26
mgiffordComment #27
sunComment #28
LewisNyman CreditAttribution: LewisNyman commentedLooks 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.
Comment #29
catchComment #30
LewisNyman CreditAttribution: LewisNyman commentedComment #31
mgiffordComment #34
mgiffordThe last patch was from 4 years ago, so marking this as "Needs work"
Comment #35
mgiffordJust came across this model from eBay https://ebay.gitbooks.io/mindpatterns/content/disclosure/tooltip.html
Comment #37
BarisW CreditAttribution: BarisW as a volunteer and at LimoenGroen commentedComment #38
mgiffordI'm just trying to unpack the MindPatterns code here http://ianmcburnie.github.io/mindpatterns/tooltip/
Some pretty straight forward HTML:
CSS:
And some Javascript. I don't have any experience with https://jqueryui.com/tooltip/
Comment #39
mgiffordJust ran across this blog on the topic too:
https://sarasoueidan.com/blog/accessible-tooltips/
Comment #52
mgiffordTagging for https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html
Comment #53
larowlanI think we should be looking at the popover API here now it looks like there will be a web standard for this
Comment #54
mgiffordSorry, what AIP @larowlan?
Also tagging for tooltips as there are a few of these?
Comment #55
larowlanhttps://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover starting to see browser support for this and there's a polyfill