Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
#demo-2-modal [data-tips] {
position: relative;
}
/* Remove a black box created by the original tooltip stylesheet. */
#demo-2-modal [data-tips]::before {
display: none;
}
body {
--tooltip-container-shape: 4px;
--tooltip-display-delay: 0ms;
--tooltip-line-height: 16px;
--tooltip-position-margin: 8px;
--tooltip-position-x: -50%;
--tooltip-position-y: -50%;
--tooltip-text-font: Rubik, Helvetica, Arial, sans-serif;
--tooltip-text-size: 12px; /* 16px */
--tooltip-text-weight: 400;
--tooltip-text-tracking: .1px;
--tooltip-touch-display-delay: 500ms;
--tooltip-transition-hide-duration: 75ms;
--tooltip-transition-easing: cubic-bezier(0, 0, .2, 1);
--tooltip-transition-show-duration: 150ms;
--tooltip-word-break: normal;
}
body,
.theme-fandomdesktop-light {
--tooltip-container-color: #616161;
--tooltip-text-color: #fff;
}
.theme-fandomdesktop-dark {
--tooltip-container-color: #e8eaed;
--tooltip-text-color: #202124;
}
#demo-2-modal [data-tips]::after {
background-color: var(--tooltip-container-color);
border: 1px solid rgba(0, 0, 0, 0);
border-radius: var(--tooltip-container-shape);
box-sizing: border-box;
color: var(--tooltip-text-color);
content: attr(data-tips);
display: flex;
font: var(--tooltip-text-weight) var(--tooltip-text-size)/var(--tooltip-line-height) var(--tooltip-text-font);
height: max-content;
left: 50%;
letter-spacing: var(--tooltip-text-tracking);
line-height: 16px;
max-height: 40vh;
max-width: 200px;
min-height: 24px;
min-width: 40px;
opacity: 0;
overflow: hidden;
overflow-wrap: anywhere;
padding: 4px 8px;
pointer-events: none;
position: absolute;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: initial;
top: 50%;
transition: opacity var(--tooltip-transition-show-duration) var(--tooltip-display-delay) var(--tooltip-transition-easing),
transform var(--tooltip-transition-show-duration) var(--tooltip-display-delay) var(--tooltip-transition-easing);
transform: scale(.8) translate(var(--tooltip-position-x), var(--tooltip-position-y));
transform-origin: top left;
width: max-content;
white-space: normal;
will-change: transform, opacity;
word-break: var(--tooltip-word-break);
z-index: 701; /* 9 */
}
#demo-2-modal [data-tips]:is(:hover, :focus, :focus-within, :active)::after,
#demo-2-modal [data-tips][active] {
opacity: 1;
transform: scale(1) translate(var(--tooltip-position-x), var(--tooltip-position-y));
}
/*
** Preventing blending of the tooltip with the rest of the page in forced
** colors mode.
*/
@media screen and (forced-colors: active) {
#demo-2-modal [data-tips]::after {
border-color: CanvasText;
}
}
/* Delay tooltip display on touch devices/events. */
#demo-2-modal [data-tips]:active::after {
transition-delay: var(--tooltip-touch-display-delay);
}
@media screen and (pointer: coarse) {
#demo-2-modal [data-tips]::after {
transition-delay: var(--tooltip-touch-display-delay);
}
}
/* Tooltip positioning. By default, place it below the container. */
/** One-directional. **/
/*** Top. ***/
#demo-2-modal [data-tips].top-tip::after,
#demo-2-modal [data-tips][top-tip]::after {
--tooltip-position-y: calc(-100% - 8px);
top: 0;
}
/*** Right. ***/
#demo-2-modal [data-tips].right-tip::after,
#demo-2-modal [data-tips][right-tip]::after {
--tooltip-position-x: 8px;
--tooltip-position-y: -50%;
left: 100%;
top: 50%;
}
/*** Bottom (default). ***/
#demo-2-modal [data-tips]::after,
#demo-2-modal [data-tips].bottom-tip::after,
#demo-2-modal [data-tips][bottom-tip]::after {
--tooltip-position-y: 8px;
top: 100%;
}
/*** Left. ***/
#demo-2-modal [data-tips].left-tip::after,
#demo-2-modal [data-tips][left-tip]::after {
--tooltip-position-x: calc(-100% - 8px);
--tooltip-position-y: -50%;
left: 0;
top: 50%;
}
/*** Center. ***/
#demo-2-modal [data-tips].center-tip::after,
#demo-2-modal [data-tips][center-tip]::after {
--tooltip-position-x: -50%;
--tooltip-position-y: -50%;
left: 50%;
top: 50%;
}
/** Bi-directional. **/
/*** Top-left. ***/
#demo-2-modal [data-tips].top-tip.left-tip::after,
#demo-2-modal [data-tips][top-tip][left-tip]::after {
--tooltip-position-x: calc(-100% - var(--tooltip-position-margin));
--tooltip-position-y: calc(-100% - var(--tooltip-position-margin));
top: 0;
left: 0;
}
/*** Top-right. ***/
#demo-2-modal [data-tips].top-tip.right-tip::after,
#demo-2-modal [data-tips][top-tip][right-tip]::after {
--tooltip-position-x: var(--tooltip-position-margin);
--tooltip-position-y: calc(-100% - var(--tooltip-position-margin));
top: 0;
left: 100%;
}
/*** Bottom-right. ***/
#demo-2-modal [data-tips].bottom-tip.right-tip::after,
#demo-2-modal [data-tips][bottom-tip][right-tip]::after {
--tooltip-position-x: var(--tooltip-position-margin);
--tooltip-position-y: var(--tooltip-position-margin);
top: 100%;
left: 100%;
}
/*** Bottom-left. ***/
#demo-2-modal [data-tips].bottom-tip.left-tip::after,
#demo-2-modal [data-tips][bottom-tip][left-tip]::after {
--tooltip-position-x: calc(-100% - var(--tooltip-position-margin));
--tooltip-position-y: var(--tooltip-position-margin);
top: 100%;
left: 0;
}
/**
*** Logical directions.
*** Be careful of modifying this section as the order in which these selectors
*** are distributed makes the tooltip to align according to either an inherited
*** direction from the tooltip trigger"s element or the direction of the
*** tooltip trigger itself. This could get simplified a bit once the :dir()
*** pseudo-class becomes standard.
**/
/*** Inline end (child of LTR element). ***/
/*** (Or right when it"s child of an LTR element). ***/
[dir="ltr"] #demo-2-modal [data-tips].after-tip::after,
[dir="ltr"] #demo-2-modal [data-tips][after-tip]::after,
[dir="ltr"]#demo-2-modal [data-tips].after-tip::after,
[dir="ltr"]#demo-2-modal [data-tips][after-tip]::after {
--tooltip-position-x: 8px;
--tooltip-position-y: -50%;
left: 100%;
top: 50%;
}
/*** Inline start/end (child of LTR/RTL element respectively). ***/
/*** (Or left when it"s child of an LTR/RTL element). ***/
[dir="ltr"] #demo-2-modal [data-tips].before-tip::after,
[dir="ltr"] #demo-2-modal [data-tips][before-tip]::after,
[dir="rtl"] #demo-2-modal [data-tips].after-tip::after,
[dir="rtl"] #demo-2-modal [data-tips][after-tip]::after,
[dir="ltr"]#demo-2-modal [data-tips].before-tip::after,
[dir="ltr"]#demo-2-modal [data-tips][before-tip]::after,
[dir="rtl"]#demo-2-modal [data-tips].after-tip::after,
[dir="rtl"]#demo-2-modal [data-tips][after-tip]::after {
--tooltip-position-x: calc(-100% - 8px);
--tooltip-position-y: -50%;
left: 0;
top: 50%;
}
/*** Inline start (child of RTL element). ***/
/*** (Or right when it"s child of an RTL element). ***/
[dir="rtl"] #demo-2-modal [data-tips].before-tip::after,
[dir="rtl"] #demo-2-modal [data-tips][before-tip]::after,
[dir="rtl"]#demo-2-modal [data-tips].before-tip::after,
[dir="rtl"]#demo-2-modal [data-tips][before-tip]::after {
--tooltip-position-x: 8px;
--tooltip-position-y: -50%;
left: 100%;
top: 50%;
}
/*** Inline end/start (LTR/RTL trigger respectively). ***/
/*** (Or right when the trigger it"s an LTR/RTL element). ***/
#demo-2-modal [dir="ltr"][data-tips].after-tip::after,
#demo-2-modal [dir="ltr"][data-tips][after-tip]::after,
#demo-2-modal [dir="rtl"][data-tips].before-tip::after,
#demo-2-modal [dir="rtl"][data-tips][before-tip]::after {
--tooltip-position-x: 8px;
--tooltip-position-y: -50%;
left: 100%;
top: 50%;
}
/*** Inline start/end (LTR/RTL trigger respectively). ***/
/*** (Or left when the trigger it"s an LTR/RTL element). ***/
#demo-2-modal [dir="ltr"][data-tips].before-tip::after,
#demo-2-modal [dir="ltr"][data-tips][before-tip]::after,
#demo-2-modal [dir="rtl"][data-tips].after-tip::after,
#demo-2-modal [dir="rtl"][data-tips][after-tip]::after {
--tooltip-position-x: calc(-100% - 8px);
--tooltip-position-y: -50%;
left: 0;
top: 50%;
}
/* Disable tooltip animation as per user preference. */
@media (prefers-reduced-motion: reduce) {
[data-tips] {
--tooltip-transition-hide-duration: 0ms !important;
--tooltip-transition-show-duration: 0ms !important;
transition-duration: 0ms !important;
}
}
#demo-2-modal {
align-items: center;
display: flex;
justify-content: center;
padding: 6em 0;
}
#demo-2-modal .demo-container-outer {
align-items: center;
display: flex;
flex-direction: column;
gap: 1em;
justify-content: center;
}
#demo-2-modal .demo-container {
align-items: center;
display: flex;
justify-content: center;
padding: 3em 0;
}
#demo-2-modal .tooltip-config-container {
align-items: center;
display: flex;
justify-content: space-evenly;
}
#demo-2-modal .mobile-footnote {
opacity: .6;
}
/* Making RTL toggle to be keyboard-accessible. */
#demo-2-modal .wds-toggle__input {
display: initial;
opacity: 0;
position: absolute;
}
/* Adding focus outline to elements that don't have it. */
#demo-2-modal .oo-ui-processDialog-actions-safe:focus-within,
#demo-2-modal .wds-toggle__input:focus + .wds-toggle__label {
outline: 2px auto;
}