preact-arco-design/es/Tooltip/style/index.less

Arco Design React UI Library.

@import './token.less';

.@{prefix}-tooltip {
  &-content {
    padding: @tooltip-padding-vertical @tooltip-padding-horizontal;
    background-color: @tooltip-color-bg;
    font-size: @tooltip-font-size;
    border-radius: @tooltip-border-radius;
    color: @tooltip-color-text;
    line-height: @line-height-base;
    box-shadow: @shadow2-down;

    &-inner {
      word-wrap: break-word;
      text-align: left;
    }
  }

  &-mini {
    font-size: @tooltip-mini-font-size;
    padding: @tooltip-mini-padding-vertical @tooltip-mini-padding-horizontal;
  }

  .@{prefix}-trigger-arrow&-arrow {
    background-color: @tooltip-color-bg;
  }
}

@{arco-theme-tag} {
  &[arco-theme='dark'] {
    .@{prefix}-tooltip-content {
      border: @border-1 solid var(~'@{arco-cssvars-prefix}-color-neutral-3');
    }

    .@{prefix}-tooltip .@{prefix}-trigger-arrow.@{prefix}-tooltip-arrow {
      border: @border-1 solid var(~'@{arco-cssvars-prefix}-color-neutral-3');
      border-top: none;
      border-left: none;
      z-index: 1;
    }
  }
}