tdesign-react/esm/style/web/components/tooltip/_index.less

TDesign Component for React

// 组件允许单个组件打包，因此默认引入公共基础样式

@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

.@{prefix}-tooltip {
  .@{prefix}-popup__content {
    display: inline-block;
    border: 0;
    z-index: @z-index-Tooltip;
    margin-bottom: 1px;
    max-width: @tooltip-max-width;
    word-break: break-word;
    box-sizing: border-box;
    border-radius: @border-radius-medium;
    color: @tooltip-light-text-color;
  }

  &--default {
    .@{prefix}-popup__content {
      color: @tooltip-text-color;
      background: @tooltip-bg;
      box-shadow: inset 0 .5px 0 @gray-color-9, inset .5px 0 0 @gray-color-9, inset 0 -.5px 0 @gray-color-9, inset -.5px 0 0 @gray-color-9;
    }

    &[data-popper-placement^="left"] .@{prefix}-popup__arrow:before {
      box-shadow: inset -.5px 0 0 @gray-color-9, inset 0 .5px 0 @gray-color-9;
    }

    &[data-popper-placement^="right"] .@{prefix}-popup__arrow:before {
      box-shadow: inset .5px 0 0 @gray-color-9, inset 0 -.5px 0 @gray-color-9;
    }

    &[data-popper-placement^="top"] .@{prefix}-popup__arrow:before {
      box-shadow: inset 0 -.5px 0 @gray-color-9, inset -.5px 0 0 @gray-color-9;
    }

    &[data-popper-placement^="bottom"] .@{prefix}-popup__arrow:before {
      box-shadow: inset .5px 0 0 @gray-color-9, inset 0 .5px 0 @gray-color-9;
    }
  }

  &--primary {
    .@{prefix}-popup__content {
      color: @tooltip-color-primary;
      background: @tooltip-bg-primary;
    }
  }

  &--success {
    .@{prefix}-popup__content {
      color: @tooltip-color-success;
      background: @tooltip-bg-success;
    }
  }

  &--danger {
    .@{prefix}-popup__content {
      color: @tooltip-color-danger;
      background: @tooltip-bg-danger;
    }
  }

  &--warning {
    .@{prefix}-popup__content {
      color: @tooltip-color-warning;
      background: @tooltip-bg-warning;
    }
  }

  .@{prefix}-popup__arrow {
    background: inherit;
    height: auto;

    &::before {
      background: inherit;
    }
  }

  &--noshadow {
    .@{prefix}-popup__content,
    &[data-popper-placement] .@{prefix}-popup__arrow:before {
      box-shadow: none;
    }
  }
}