@eclipse-scout/core/src/tooltip/Tooltip.less

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2025 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
.tooltip {
  position: absolute;
  background-color: @tooltip-info-background-color;
  border-radius: @tooltip-border-radius;
  border: @tooltip-border-width solid @tooltip-border-color;
  color: @tooltip-info-color;
  #scout.drop-shadow(@y: 4px, @blur: 6px, @alpha: 5%);
  max-width: 300px;
  white-space: normal;
}

.tooltip-content {
  padding: @tooltip-padding-y @tooltip-padding-x;
  position: relative;
  min-width: 60px; /* Prevents tooltips with very short text from looking "strange" */
  #scout.overflow-ellipsis();
  font-weight: @tooltip-font-weight;
  background-color: inherit; // Necessary if arrow has a border
  border-radius: @tooltip-border-radius;

  .has-menus > & {
    font-weight: @font-weight-bold;
    padding-left: @context-menu-item-padding-left;
    padding-right: @context-menu-item-padding-right;
    padding-top: @tooltip-padding-y + 6px;
  }

  & .small {
    font-size: @font-size-small;
    font-weight: @font-weight-normal;
    color: @tooltip-small-color;
  }

  & > .table-cell-icon {
    // necessary to overrule default icon color in table-cell tooltips (e.g. when hovering a grouping number value having an ellipsis)
    color: @tooltip-info-color;
  }
}

.tooltip-menus {
  position: relative;
  background-color: inherit; // Necessary if arrow has a border
  margin-bottom: 6px;

  .no-text > & {
    margin-top: 6px;
  }

  & > .menu-item {
    display: flex;
    justify-content: start;
    border-radius: 0;
    padding: @tooltip-padding-y @context-menu-item-padding-right @tooltip-padding-y @context-menu-item-padding-left;

    & > .submenu-icon {
      padding-left: 5px;
    }

    &.selected:not(.has-popup) {
      background-color: @tooltip-menu-selected-background-color;

      &:hover {
        background-color: @tooltip-menu-selected-hover-background-color;
      }

      &.focused {
        background-color: @tooltip-menu-selected-hover-background-color;
      }

      &.disabled {
        background-color: @tooltip-menu-selected-background-color;
      }
    }

    &:hover {
      background-color: @tooltip-menu-hover-background-color;
    }

    &.focused {
      background-color: @tooltip-menu-focused-background-color;
    }

    &.disabled {
      background-color: transparent;
    }

    .ok > & {
      color: @tooltip-ok-color;

      &.disabled {
        color: fade(@tooltip-ok-color, 50%);
      }
    }

    .info > & {
      color: @tooltip-menu-color;

      &.disabled {
        color: fade(@tooltip-menu-color, 50%);
      }

      &.selected:not(.has-popup) {
        color: @tooltip-menu-info-selected-color;
        background-color: @tooltip-menu-info-selected-background-color;

        &:hover {
          background-color: @tooltip-menu-info-selected-hover-background-color;
        }

        &.focused {
          background-color: @tooltip-menu-info-selected-hover-background-color;
        }

        &.disabled {
          color: @tooltip-menu-item-selected-disabled-color;
          background-color: @tooltip-menu-info-selected-disabled-background-color;
        }
      }

      &:hover {
        background-color: @tooltip-menu-info-hover-background-color;
      }

      &.focused {
        background-color: @tooltip-menu-info-focused-background-color;
      }

      &.disabled {
        background-color: transparent;
      }
    }

    .warning > & {
      color: @tooltip-warning-color;

      &.disabled {
        color: fade(@tooltip-warning-color, 50%);
      }
    }

    .error > & {
      color: @tooltip-error-color;

      &.disabled {
        color: fade(@tooltip-error-color, 50%);
      }
    }
  }
}

.tooltip-arrow {
  position: absolute;
  width: @tooltip-arrow-size;
  height: @tooltip-arrow-size;
  background-color: inherit;
  border: inherit;
}

.tooltip-arrow.arrow-bottom {
  bottom: 0;
  transform: translate(-50%, 50%) rotate(45deg);
}

.tooltip-arrow.arrow-top {
  top: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.tooltip.error {
  background-color: @tooltip-error-background-color;
  border-width: 0;
  color: @tooltip-error-color;

  & > .tooltip-arrow {
    background-color: @tooltip-error-background-color;
  }
}

.tooltip.warning {
  background-color: @tooltip-warning-background-color;
  border-width: 0;
  color: @tooltip-warning-color;

  & > .tooltip-arrow {
    background-color: @tooltip-warning-background-color;
  }
}

.tooltip.ok {
  background-color: @tooltip-ok-background-color;
  border-width: 0;
  color: @tooltip-ok-color;

  & > .tooltip-arrow {
    background-color: @tooltip-ok-background-color;
  }
}