title-tip {
  /* --tt-tip-font: ; */
  --tt-button-size: 1.6rem;
  --tt-border-width: 2px;
  --tt-border-color: gray;
  --tt-text-color: currentColor;
  --tt-tip-background: #ffffef;
  --tt-button-background: #f5f5f5;
  --tt-focus-background: #f0f0f0;

  /* Width multipliers.
  */
  --tt-narrow-multiplier: 0.38rem; /* Suitable for Times New Roman, etc. */
  --tt-medium-multiplier: 0.44rem; /* Suitable for Arial, etc. */
  --tt-wide-multiplier:   0.54rem; /* Suitable for Verdana, etc. */

  &::part(button) {
    background-color: var(--tt-button-background);
    border-color: var(--tt-border-color);
    border-width: var(--tt-border-width);
    border-radius: 50%;
    color: var(--tt-text-color);
    cursor: help;
    margin-left: .15rem;
    outline-offset: .2rem;
    height: var(--tt-button-size);
    width: var(--tt-button-size);
  }

  &::part(button):focus,
  &::part(button):hover {
    background-color: var(--tt-focus-background);
  }

  &::part(tip) {
    background: var(--tt-tip-background);
    border-radius: .25rem;
    color: var(--tt-text-color);
    font-family: var(--tt-tip-font);
    line-height: 1.3;
    padding: .2rem .2rem 0;
    text-align: center;
    margin-bottom: 4px;
    min-width: 5rem;
    overflow: visible;
  }

  &::part(arrow) {
    background: var(--tt-tip-background);
    border: 2px solid currentColor;
    border-top: none;
    border-left: none;
    X_content: ' ';
    display: block;
    margin: 0 auto;
    height: .4rem;
    width: .4rem;
    position: relative;
    top: 5px;
    transform: rotate(45deg);
  }
}

/* Legacy. */
.fix-title-attr-button {
  border-color: gray;
  border-radius: 50%;
  cursor: help;
  margin-left: .25rem;
  height: 1.6rem;
  width: 1.6rem;
}