formstone/src/less/tooltip.less

Library of modular front end components.

/**
 * @component
 * @name Tooltip
 */

@import "imports/utils.less";

// Config

@fs-tooltip-z-index: 10;

@fs-tooltip-transition-duration: 0.15s;

/**
 * @class
 * @name .fs-tooltip-element
 * @type element
 * @description Target elmement
 */

/**
 * @class
 * @name .fs-tooltip
 * @type element
 * @description Base widget class
 */

/**
 * @class
 * @name .fs-tooltip.fs-tooltip-visible
 * @type modifier
 * @description Inidcates visible state
 */

/**
 * @class
 * @name .fs-tooltip.fs-tooltip-right
 * @type modifier
 * @description Inidcates right side display
 */

/**
 * @class
 * @name .fs-tooltip.fs-tooltip-left
 * @type modifier
 * @description Inidcates left side display
 */

/**
 * @class
 * @name .fs-tooltip.fs-tooltip-top
 * @type modifier
 * @description Inidcates top display
 */

/**
 * @class
 * @name .fs-tooltip.fs-tooltip-bottom
 * @type modifier
 * @description Inidcates bottom display
 */

.fs-tooltip {
  width: 1px;
  height: 1px;

  position: absolute;
  top: -999px;
  left: -999px;
  z-index: @fs-tooltip-z-index;

  opacity: 0;
  pointer-events: none;
  transition: opacity @fs-tooltip-transition-duration linear;

  &,
  &:after,
  &:before,
  *,
  *:after,
  *:before {
    box-sizing: border-box;
    transition: none;
    user-select: none !important;
  }

  // Visible

  &-visible {
    opacity: 1;
  }

  /**
   * @class
   * @name .fs-tooltip-content
   * @type element
   * @description Tooltip content wrapper
   */

  &-content {
    display: block;
    float: left;
    position: relative;
    white-space: nowrap;
  }

  /**
   * @class
   * @name .fs-tooltip-caret
   * @type element
   * @description Tooltip caret
   */

  &-caret {
    display: none;
  }

  // .fs-tooltip-right

  &-right {
    .fs-tooltip-content {
    }

    .fs-tooltip-caret {
    }
  }


  // .fs-tooltip-left

  &-left {
    .fs-tooltip-content {
    }

    .fs-tooltip-caret {
    }
  }

  &-top,
  &-bottom {
    .fs-tooltip-caret {
    }
  }

  // .fs-tooltip-top

  &-top {
    .fs-tooltip-content {
    }

    .fs-tooltip-caret {
    }
  }

  // .fs-tooltip-bottom

  &-bottom {
    .fs-tooltip-content {
    }

    .fs-tooltip-caret {
    }
  }
}