WdsTooltips/Customization

This page is a customization guide on WdsTooltips.
Please note that custom styles and import statement should be added to both the desktop CSS page (MediaWiki:Common.css) and the mobile CSS page (MediaWiki:FandomMobile.css for FANDOM community and MediaWiki:Mobile.css for Gamepedia community).
== Basic Configuration ==
These are the basic properties to improve tooltip discoverability and readability. The stylesheet includes general fixes for some elements that would otherwise break the layout when used within tooltips.
The following properties can be customized via variables:
== Custom Styling ==
WDS uses three components for dropdowns: the , the , and the . Custom styling can be applied to these components.
=== Popup Animation ===
The following stylesheet adds a brief popup animation and a slight delay when triggering the .
The following properties can be customized via variables:
=== Compact Scrollbar ===
The following snippet minifies the scrollbar to reduce distraction and space taken up by it within scrollable .
== Built-in Classes ==
WDS offers extended classes for dropdowns which can be used to configure the placement and behavior of tooltips. In tooltip template syntax, classes with the scope of wds-dropdown and wds-dropdown__content are passed as values to the parameters class1 and class2 respectively. Classes with matching scope can be used together as well.
 Classes and their Functions
Class 	Scope 	Function 	Demonstration
wds-is-left-aligned 	wds-dropdown__content	Aligns the dropdown to left of the toggle 	
wds-is-right-aligned	wds-dropdown__content	Aligns the dropdown to right of the toggle 	
wds-is-flipped 	wds-dropdown 	Flips the vertical position of the dropdown	
wds-open-to-right 	wds-dropdown 	Opens the dropdown to right of the toggle 	
wds-no-chevron 	wds-dropdown 	Excludes chevron from the dropdown 	
wds-is-not-hoverable	wds-dropdown 	Disables the dropdown in desktop skin 	
wds-is-hidden 	wds-dropdown 	Hides the element 	
wds-is-active 	wds-dropdown 	Forces the dropdown into active state