Inline tooltip positioning and system-color styling for any theme

Problem/Motivation

I tried to make the tooltips consistent for all themes and screen sizes by displaying them inline, even allowing for recursive tips (which I interpret as explanations/substitutions by adding a "= " ::before pseudo-element).

Here are the results on a very small screen:

Before hovering or focusing:
(you can even tab if you allow <span class="tx-tooltip tx-tooltip-text" tabindex="0"> in your input filter)

Hovering on the term:

Hovering on the tooltip, which has another term (2nd level):

Focusing (mobile tap or tabbing for accessibility):

Focusing on 2nd level: ok with tapping but I couldn't make it display with subsequent tabbing yet.

The CSS to achieve this is even simpler than the current one in the module, because it uses font-weight and background-color instead of borders and spacing, and display instead of visibility:

.tx-tooltip {
  font-weight: bolder;
  cursor: help;
}

.tx-tooltip .tx-tooltip-text {
  display: none;
  background-color: Highlight;
  color: HighlightText;
  font-weight: initial;
}

.tx-tooltip .tx-tooltip-text::before {
  content: "= ";
}

.tx-tooltip:hover .tx-tooltip-text,
.tx-tooltip:focus .tx-tooltip-text {
  display: initial;
}

.tx-tooltip:hover .tx-tooltip-text .tx-tooltip .tx-tooltip-text,
.tx-tooltip:focus .tx-tooltip-text .tx-tooltip .tx-tooltip-text {
  display: none;
}

.tx-tooltip:hover .tx-tooltip-text .tx-tooltip:hover .tx-tooltip-text,
.tx-tooltip:focus .tx-tooltip-text .tx-tooltip:focus .tx-tooltip-text {
  display: initial;
}