Fandom Developers Wiki
Advertisement

This page is a documentation on accessibility of WdsTooltips in mobile skin.

The javascript helps in positioning and aligning the tooltips correctly, effectively avoiding them from clipping out (and thus, being hidden) from the page container bounds. The javascript is not functional on mobile skin due to customization restrictions.

Setting the right Alignment

Content overflow is visible by default in mobile skin. However due to the packed nature and low horizontal width and margin, wide tooltips located at the sides of the page may appear cut off to the corresponding edge of the screen. Thus, it is important to always set the alignment of the tooltips correctly in accordance with their estimated location in the page. For example, using wds-is-right-aligned for tooltip toggle appearing at the right, or wds-is-flipped for tooltip toggle appearing at the page ending. These classes may also be used together.

Content
I am left-aligned.
Content
I am flipped and right-aligned.

Preferable Alignment

Tooltip overflowing to the right side can be viewed by scrolling the page to right, but tooltip overflowing to the left side is inaccessible. In case of uncertainty in location of the tooltip in page due to word-wrapping, wds-is-left-aligned is generally more preferable in terms of accessibility.

Content
I am right-aligned.
Content
I am left-aligned.

Making the Toggle Accessible

Mobile skin displays the tooltip only on tap events. The tooltip becomes inaccessible when the toggle is a link or an image, where tapping triggers a different event than displaying the tooltip. Thus, using them as toggle is a bad practice.

WdsTooltips oasis
Content
Content

Workaround

On compulsion, the following CSS rule can be added to the wiki's MediaWiki:FandomMobile.css (or MediaWiki:Mobile.css for Gamepedia community) in order to disable the image/link navigation within tooltip toggle, so that tap events can safely display the tooltip. In such cases, editors may consider re-linking the disabled link inside the tooltip.

.custom-tooltip .wds-dropdown__toggle a,
.custom-tooltip .wds-dropdown__toggle figure {
	pointer-events: none;
}
WdsTooltips oasis
Content
Text above can be found here (edit)
Advertisement