Making Hovertexts Work

Example: Docusaurus `custom.css` file

/** * Any CSS included here will be global. The classic template * bundles Infima by default. Infima is a CSS framework designed to * work well for content-centric websites. */

/ You can override the default Infima variables here. / :root { --ifm-color-primary: #ac3c7a; --ifm-color-primary-dark: #9b366e; --ifm-color-primary-darker: #923368; --ifm-color-primary-darkest: #782a55; --ifm-color-primary-light: #bd4286; --ifm-color-primary-lighter: #c04b8c; --ifm-color-primary-lightest: #c9649c; --ifm-code-font-size: 95%; } html[data-theme='dark'] { background: var(--ifm-color-emphasis-100); }

.docusaurus-highlight-code-line { background-color: rgb(72, 77, 91); display: block; margin: 0 calc(-1 * var(--ifm-pre-padding)); padding: 0 var(--ifm-pre-padding); }

.hero .button.button--secondary.button--outline:not(.button--active):not(:hover) { color: var(--ifm-color-secondary); }

a[hovertext] { position: relative; cursor: help; font-weight: 600; }

a[hovertext]::after { content: attr(hoverText); position: absolute; width: max-content; background: var(--ifm-color-content); color: var(--ifm-color-content-inverse); font-size: var(--ifm-code-font-size); font-weight: 400; max-width: 25vw; padding: 4px 8px; border-radius: 4px; line-height: 1.2em; white-space: pre-wrap; word-break: break-word; top: calc(100% + 10px); transform: translateX(-50%); transition: opacity 0.3s, visibility 0.3s; pointer-events: none; z-index: 1; opacity: 0; visibility: hidden; }

a[hovertext]:hover::after { visibility: visible; opacity: .95; }