Contrib.social

Tooltip positioning and styling for Claro (default D10 core admin theme)

Open on Drupal.org →
Created on 12 May 2023, over 1 year ago
Updated 13 May 2023, over 1 year ago

Problem/Motivation

I tried to make the tooltips better looking for Claro theme and with a positioning that I think is more solid (going to the right of the term can easily result in going off the display for small screens).

Changes:

  1. positioned the tooltip on top because it explains a term the reader should know before what he is reading; this should apply cleanly to any theme.
  2. used the Claro supplied CSS variables for coloring and shadows (they can be replaced with your values/variables).
  3. used the CSS units "ch" and "ex" for the spacing so that everything depends on the font-size.
  4. inceased the z-index to go above the node tabs menu (small screens)
  5. applied a CSS transition and allowed the visibility conditions to work for another (recursive) level of tooltip, like shown in the screenshot.

Result:

tooltip.css:

.tx-tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 2px dashed var(--color-link);
  cursor: help;
}

.tx-tooltip .tx-tooltip-text {
  visibility: hidden;
  min-width: 120px;
  width: 24ch;
  background-color: var(--color-blue-020);
  border-radius: var(--input-border-radius-size);
  border: 0.2ex solid var(--color-link);
  padding: 1ex 1ch;
  position: absolute;
  z-index: 1;
  bottom: 1.8ex;
  left: -2ch;
  box-shadow: 0 1px 2px 1px var(--ck-color-shadow-drop);
}

.tx-tooltip .tx-tooltip-text::after {
  content: "";
  position: absolute;
  left: 1ch;
  bottom: -4.5ex;
  margin-top: 0;
  border-width: 1ch;
  border-style: solid;
  border-color: var(--color-link) transparent transparent transparent;
}

.tx-tooltip .tx-tooltip-text,
.tx-tooltip .tx-tooltip-text::after,
.tx-tooltip:hover .tx-tooltip-text .tx-tooltip .tx-tooltip-text,
.tx-tooltip:focus .tx-tooltip-text .tx-tooltip .tx-tooltip-text,
.tx-tooltip:hover .tx-tooltip-text .tx-tooltip .tx-tooltip-text::after,
.tx-tooltip:focus .tx-tooltip-text .tx-tooltip .tx-tooltip-text::after {
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, -4ex, 0);
  transition: all .15s ease-in-out;
}

.tx-tooltip:hover .tx-tooltip-text,
.tx-tooltip:focus .tx-tooltip-text,
.tx-tooltip:hover .tx-tooltip-text::after,
.tx-tooltip:focus .tx-tooltip-text::after,
.tx-tooltip .tx-tooltip-text .tx-tooltip:hover .tx-tooltip-text,
.tx-tooltip .tx-tooltip-text .tx-tooltip:focus .tx-tooltip-text,
.tx-tooltip .tx-tooltip-text .tx-tooltip:hover .tx-tooltip-text::after,
.tx-tooltip .tx-tooltip-text .tx-tooltip:focus .tx-tooltip-text::after {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, -2ex, 0);
}
💬 Support request
Status

RTBC

Version

2.1

Component

Documentation

Created by

🇮🇹Italy kopeboy Milan

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @kopeboy
  • Status changed to Needs review over 1 year ago
  • Comment over 1 year ago →
    🇮🇹Italy kopeboy Milan
  • Status changed to RTBC over 1 year ago
  • Comment over 1 year ago →
    🇮🇹Italy kopeboy Milan

    Of course it would be much better to provide the CSS (with your customizations) in your custom module or theme or in any other overriding .css file to maintain future compatibility/composability with this module :)

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024