@inspark/components-web 14.0.14 → 19.0.0

package/src/tooltip/_mixins.scss

@@ -1,817 +1,820 @@
-@import "../base/variables";
-@import "./variables";
-@import "../typography/variables";
-
-@mixin ids-tooltip-core-styles {
-  @include ids-tooltip;
-  @include ids-tooltip-directions;
-  @include ids-tooltip-sizes;
-  @include ids-tooltip-validation;
-}
-
-/*
-Tooltip
-
-A tooltip provides a short description of a UI element.
-
-`.c-tooltip`
-
-This class wraps an actionable icon followed by the .c-tooltip__content to be shown on the icon. The content appears when the user hovers over the icon.
-
-`.c-tooltip__content`
-
-This class contains the text that will be shown when the tooltip is visible.
-
-- Use a verb phrase to describe the action on the icon, for example, “Edit settings.”
-- Use only plain text and be concise. Tooltips can be a sentence fragment.
-- If more detailed information is required, use another form of help.
-- Use sentence-style caps and no ending punctuation.
-
-markup:
-<div class="o-box o-box_large">
-  <a href="#" role="tooltip" aria-haspopup="true" class="c-tooltip">
-      <span class="fa fa-calendar"></span>
-      <span class="c-tooltip__content">Tooltip content</span>
-  </a>
-</div>
-
-*/
-
-@mixin ids-tooltip {
-  .c-tooltip {
-    display: block;
-    position: relative;
-    text-align: left;
-    overflow: visible;
-
-    &:hover,
-    &:focus {
-      .c-tooltip__content {
-        visibility: visible;
-        opacity: 1;
-      }
-    }
-
-    &:focus {
-      outline: 0;
-
-      &:first-child {
-        outline-offset: 1px;
-        outline-width: 1px;
-        outline-color: #3b99fc;
-        outline-style: solid;
-      }
-    }
-  }
-
-  .c-tooltip__content {
-    position: absolute;
-    width: auto;
-    margin: 0;
-    margin-bottom: $unit-small;
-    padding: 9px 12px;
-    font-size: 13px;
-    font-weight: 400;
-    letter-spacing: normal;
-    border-radius: 3px;
-    line-height: $line-height-computed;
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 0.3s linear;
-    z-index: 1070;
-    background: $tooltip-bg;
-    @include ids-box-shadow-core-styles;
-    color: $tooltip-color;
-    white-space: normal;
-    text-transform: none;
-  }
-}
-
-/*
-Tooltip directions
-
-Tooltips support six directions, defined by using one of the following classes with the `.c-tooltip` class:
-- `.c-tooltip_top-right`
-- `.c-tooltip_top-left`
-- `.c-tooltip_bottom-right`
-- `.c-tooltip_bottom-left`
-- `.c-tooltip_right`
-- `.c-tooltip_left`
-
-markup:
-<div class="o-grid o-grid_wrap">
-	<div class="o-grid__cell o-grid__cell_width-33 o-box">
-	  <a href="#" role="tooltip" aria-haspopup="true" class="c-tooltip c-tooltip_bottom-right">
-      Bottom-right
-      <span class="c-tooltip__content">Tooltip content</span>
-    </a>
-	</div>
-	<div class="o-grid__cell o-grid__cell_width-33 o-box">
-	  <a href="#" role="tooltip" aria-haspopup="true" class="c-tooltip c-tooltip_bottom">
-      Bottom
-      <span class="c-tooltip__content">Tooltip content</span>
-    </a>
-	</div>
-	<div class="o-grid__cell o-grid__cell_width-33 o-box">
-	  <a href="#" role="tooltip" aria-haspopup="true" class="c-tooltip c-tooltip_bottom-left">
-      Bottom-left
-      <span class="c-tooltip__content">Tooltip content</span>
-    </a>
-	</div>
-	<div class="o-grid__cell o-grid__cell_width-33 o-box">
-	  <a href="#" role="tooltip" aria-haspopup="true" class="c-tooltip c-tooltip_right">
-      Right
-      <span class="c-tooltip__content">Tooltip content</span>
-    </a>
-	</div>
-	<div class="o-grid__cell o-grid__cell_width-33 o-box">
-	  <div>
-      No tooltip
-    </div>
-	</div>
-	<div class="o-grid__cell o-grid__cell_width-33 o-box">
-	  <a href="#" role="tooltip" aria-haspopup="true" class="c-tooltip c-tooltip_left">
-      Left
-      <span class="c-tooltip__content">Tooltip content</span>
-    </a>
-	</div>
-	<div class="o-grid__cell o-grid__cell_width-33 o-box">
-	  <a href="#" role="tooltip" aria-haspopup="true" class="c-tooltip c-tooltip_top-right">
-      Top-right
-      <span class="c-tooltip__content">Tooltip content</span>
-    </a>
-	</div>
-	<div class="o-grid__cell o-grid__cell_width-33 o-box">
-	  <a href="#" role="tooltip" aria-haspopup="true" class="c-tooltip c-tooltip_top">
-      Top
-      <span class="c-tooltip__content">Tooltip content</span>
-    </a>
-	</div>
-	<div class="o-grid__cell o-grid__cell_width-33 o-box">
-	  <a href="#" role="tooltip" aria-haspopup="true" class="c-tooltip c-tooltip_top-left">
-      Top-left
-      <span class="c-tooltip__content">Tooltip content</span>
-    </a>
-	</div>
-</div>
-
-*/
-
-@mixin ids-tooltip-directions {
-  .c-tooltip,
-  .c-tooltip_top-right {
-    > .c-tooltip__content {
-      top: auto;
-      bottom: 0%;
-      left: 10%;
-      right: auto;
-      border-bottom-left-radius: 0;
-
-      &::before {
-        position: absolute;
-        bottom: -9px;
-        left: 0;
-        top: auto;
-        right: auto;
-        content: "";
-        border-left: 6px solid $tooltip-bg;
-        border-top: 5px solid $tooltip-bg;
-        border-right: 6px solid transparent;
-        border-bottom: 5px solid transparent;
-      }
-    }
-  }
-
-  .c-tooltip_top-left > .c-tooltip__content {
-    top: auto;
-    bottom: 100%;
-    right: 50%;
-    left: auto;
-    border-bottom-right-radius: 0;
-
-    &::before {
-      bottom: -9px;
-      right: 0;
-      top: auto;
-      left: auto;
-      content: "";
-      border-right: 6px solid $tooltip-bg;
-      border-top: 5px solid $tooltip-bg;
-      border-left: 6px solid transparent;
-      border-bottom: 5px solid transparent;
-    }
-  }
-
-  .c-tooltip_bottom-right > .c-tooltip__content {
-    bottom: auto;
-    top: 100%;
-    left: 50%;
-    right: auto;
-    margin-top: $unit-small;
-    border-top-left-radius: 0;
-
-    &::before {
-      top: -9px;
-      left: 0;
-      bottom: auto;
-      right: auto;
-      content: "";
-      border-left: 6px solid $tooltip-bg;
-      border-bottom: 5px solid $tooltip-bg;
-      border-right: 6px solid transparent;
-      border-top: 5px solid transparent;
-    }
-  }
-
-  .c-tooltip_bottom-left > .c-tooltip__content {
-    bottom: auto;
-    top: 100%;
-    right: 50%;
-    left: auto;
-    margin-top: $unit-small;
-    border-top-right-radius: 0;
-
-    &::before {
-      top: -9px;
-      right: 0;
-      bottom: auto;
-      left: auto;
-      content: "";
-      border-right: 6px solid $tooltip-bg;
-      border-bottom: 5px solid $tooltip-bg;
-      border-left: 6px solid transparent;
-      border-top: 5px solid transparent;
-    }
-  }
-
-  .c-tooltip_bottom > .c-tooltip__content {
-    bottom: auto;
-    top: 100%;
-    transform: translateX(-50%) translateY(8px);
-
-    &::before {
-      position: absolute;
-      top: -10px;
-      right: calc(50% - 6px);
-      bottom: auto;
-      left: auto;
-      content: "";
-      border-right: 6px solid transparent;
-      border-bottom: 5px solid $tooltip-bg;
-      border-left: 6px solid transparent;
-      border-top: 5px solid transparent;
-    }
-  }
-
-  .c-tooltip_right > .c-tooltip__content {
-    right: auto;
-    left: 100%;
-    top: 50%;
-    bottom: auto;
-    margin-left: $unit-small;
-    border-top-left-radius: 0;
-
-    &::before {
-      top: 0;
-      left: -9px;
-      bottom: auto;
-      right: auto;
-      content: "";
-      border-top: 6px solid $tooltip-bg;
-      border-right: 5px solid $tooltip-bg;
-      border-bottom: 6px solid transparent;
-      border-left: 5px solid transparent;
-    }
-  }
-
-  .c-tooltip_left > .c-tooltip__content {
-    left: auto;
-    right: 100%;
-    top: 50%;
-    bottom: auto;
-    margin-right: $unit-small;
-    border-top-right-radius: 0;
-
-    &::before {
-      top: 0;
-      right: -9px;
-      bottom: auto;
-      left: auto;
-      content: "";
-      border-top: 6px solid $tooltip-bg;
-      border-left: 5px solid $tooltip-bg;
-      border-bottom: 6px solid transparent;
-      border-right: 5px solid transparent;
-    }
-  }
-
-  .c-tooltip_top > .c-tooltip__content {
-    top: auto;
-    bottom: 100%;
-    transform: translateX(-50%) translateY(8px);
-
-    &::before {
-      position: absolute;
-      bottom: -10px;
-      right: calc(50% - 6px);
-      top: auto;
-      left: auto;
-      content: "";
-      border-right: 6px solid transparent;
-      border-top: 5px solid $tooltip-bg;
-      border-left: 6px solid transparent;
-      border-bottom: 5px solid transparent;
-    }
-  }
-}
-
-/*
-Tooltip sizes
-
-Set a width that accommodates the text string. The default is 240 px. Other choices are 72 px, 120 px, and 360 px.
-- `.c-tooltip_xs` - 72px,
-- `.c-tooltip_sm` - 120px,
-- `.c-tooltip_lg` - 360px
-
-markup:
-<div class="o-box o-box_large">
-  <button class="c-btn c-tooltip c-tooltip_xs" role="tooltip" aria-haspopup="true">
-  	xsmall
-  	<span class="c-tooltip__content">width = 72px</span>
-  </button>
-  <button class="c-btn c-tooltip c-tooltip_sm" role="tooltip" aria-haspopup="true">
-  	small
-  	<span class="c-tooltip__content">width = 120px</span>
-  </button>
-  <button class="c-btn c-tooltip" role="tooltip" aria-haspopup="true">
-  	default
-  	<span class="c-tooltip__content">width = 240px</span>
-  </button>
-  <button class="c-btn c-tooltip c-tooltip_lg" role="tooltip" aria-haspopup="true">
-  	large
-  	<span class="c-tooltip__content">width = 360px</span>
-  </button>
-</div>
-
-*/
-
-@mixin ids-tooltip-sizes {
-  .c-tooltip_xs > .c-tooltip__content {
-    width: 72px;
-  }
-
-  .c-tooltip_sm > .c-tooltip__content {
-    width: 120px;
-  }
-
-  .c-tooltip_md > .c-tooltip__content {
-    width: 240px;
-  }
-
-  .c-tooltip_lg > .c-tooltip__content {
-    width: 360px;
-  }
-
-  .c-tooltip,
-  .c-tooltip_top-left,
-  .c-tooltip_top-right {
-    > .c-btn + .c-tooltip__content {
-      margin-bottom: 10px;
-    }
-  }
-
-  .c-tooltip_bottom-left,
-  .c-tooltip_bottom-right {
-    > .c-btn + .c-tooltip__content {
-      margin-top: 10px;
-    }
-  }
-
-  .c-tooltip_right > .c-btn + .c-tooltip__content {
-    margin-left: 4px;
-  }
-}
-
-/*
-Tooltip-based validation messages
-
-Works on both field layouts. Instead of default tooltip validation tooltip fires on `:focus` event.
-
-Top, top-left and top-right tooltip variants are preferred.
-
-markup:
-<form class="c-form c-form_compact">
-  <div class="c-form-group">
-    <div class="c-form-field c-tooltip c-tooltip_validation c-tooltip_top-right is-tooltip-validation_invalid">
-      <label class="c-label" for="inputflc12" >Input-label siblings layout</label>
-      <input class="c-input c-input_is-error" id="inputflc12" placeholder="Type something..." type="text">
-      <span class="c-tooltip__content">Invalid content in field</span>
-    </div>
-  </div>
-  <div class="c-form-group">
-    <label class="c-label c-tooltip c-tooltip_validation c-tooltip_top-right is-tooltip-validation_invalid">
-      <span class="c-label__content">Input wrapped with label layout</span>
-      <input class="c-input c-input_is-error c-input_block" type="text" placeholder="Type something...">
-      <span class="c-tooltip__content">Invalid content in field</span>
-    </label>
-  </div>
-  <div class="c-form-group">
-    <div class="c-form-field c-tooltip c-tooltip_validation c-tooltip_bottom-right is-tooltip-validation_invalid">
-      <label class="c-label" for="inputflc12" >Input-label siblings layout</label>
-      <input class="c-input c-input_is-error" id="inputflc12" placeholder="Type something..." type="text">
-      <span class="c-tooltip__content">Invalid content in field</span>
-    </div>
-  </div>
-  <div class="c-form-group">
-    <label class="c-label c-tooltip c-tooltip_validation c-tooltip_bottom-right is-tooltip-validation_invalid">
-      <span class="c-label__content">Input wrapped with label layout</span>
-      <input class="c-input c-input_is-error c-input_block" type="text" placeholder="Type something...">
-      <span class="c-tooltip__content">Invalid content in field</span>
-    </label>
-  </div>
-  <div class="c-form-group">
-    <label class="c-checkbox c-checkbox_inline">
-      <input type="checkbox" class="c-checkbox__input">
-      <i class="c-checkbox__icon"></i>
-      <span class="c-checkbox__label">Check this</span>
-    </label>
-    <label class="c-checkbox c-checkbox_inline">
-      <input type="checkbox" class="c-checkbox__input">
-      <i class="c-checkbox__icon"></i>
-      <span class="c-checkbox__label">Check this</span>
-    </label>
-  </div>
-  <div class="o-grid o-grid_wrap">
-    <div class="o-grid__cell o-grid__cell_width-33 o-box">
-      <div class="c-form-group">
-        <div class="c-form-field c-tooltip c-tooltip_validation c-tooltip_bottom-right is-tooltip-validation_invalid">
-          <label class="c-label" for="inputflc1233" >Tooltip at</label>
-          <input class="c-input c-input_is-error" id="inputflc1233" placeholder="bottom-right" type="text">
-          <span class="c-tooltip__content">Invalid content in field</span>
-        </div>
-      </div>
-      <div class="c-form-group">
-        <label class="c-label c-tooltip c-tooltip_validation c-tooltip_bottom-right is-tooltip-validation_invalid">
-          <span class="c-label__content">Tooltip at</span>
-          <input class="c-input c-input_is-error c-input_small" type="text" placeholder="bottom-right">
-          <span class="c-tooltip__content">Invalid content in field</span>
-        </label>
-      </div>
-    </div>
-    <div class="o-grid__cell o-grid__cell_width-33 o-box">
-      <div class="c-form-group">
-        <div class="c-form-field c-tooltip c-tooltip_validation c-tooltip_bottom is-tooltip-validation_invalid">
-          <label class="c-label" for="inputflc1234" >Tooltip at</label>
-          <input class="c-input c-input_is-error" id="inputflc1234" placeholder="bottom" type="text">
-          <span class="c-tooltip__content">Invalid content in field</span>
-        </div>
-      </div>
-      <div class="c-form-group">
-        <label class="c-label c-tooltip c-tooltip_validation c-tooltip_bottom is-tooltip-validation_invalid">
-          <span class="c-label__content">Tooltip at</span>
-          <input class="c-input c-input_is-error c-input_small" type="text" placeholder="bottom">
-          <span class="c-tooltip__content">Invalid content in field</span>
-        </label>
-      </div>
-    </div>
-    <div class="o-grid__cell o-grid__cell_width-33 o-box">
-      <div class="c-form-group">
-        <div class="c-form-field c-tooltip c-tooltip_validation c-tooltip_bottom-left is-tooltip-validation_invalid">
-          <label class="c-label" for="inputflc1235" >Tooltip at</label>
-          <input class="c-input c-input_is-error" id="inputflc1235" placeholder="bottom-left" type="text">
-          <span class="c-tooltip__content">Invalid content in field</span>
-        </div>
-      </div>
-      <div class="c-form-group">
-        <label class="c-label c-tooltip c-tooltip_validation c-tooltip_bottom-left is-tooltip-validation_invalid">
-          <span class="c-label__content">Tooltip at</span>
-          <input class="c-input c-input_is-error c-input_small" type="text" placeholder="bottom-left">
-          <span class="c-tooltip__content">Invalid content in field</span>
-        </label>
-      </div>
-    </div>
-    <div class="o-grid__cell o-grid__cell_width-33 o-box">
-      <div class="c-form-group">
-        <div class="c-form-field c-tooltip c-tooltip_validation c-tooltip_right is-tooltip-validation_invalid">
-          <label class="c-label" for="inputflc1236" >Tooltip at</label>
-          <input class="c-input c-input_is-error" id="inputflc1236" placeholder="right" type="text">
-          <span class="c-tooltip__content">Invalid content in field</span>
-        </div>
-      </div>
-      <div class="c-form-group">
-        <label class="c-label c-tooltip c-tooltip_validation c-tooltip_right is-tooltip-validation_invalid">
-          <span class="c-label__content">Tooltip at</span>
-          <input class="c-input c-input_is-error c-input_small" type="text" placeholder="right">
-          <span class="c-tooltip__content">Invalid content in field</span>
-        </label>
-      </div>
-    </div>
-    <div class="o-grid__cell o-grid__cell_width-33 o-box">
-      <div>
-        No tooltip
-      </div>
-    </div>
-    <div class="o-grid__cell o-grid__cell_width-33 o-box">
-      <div class="c-form-group">
-        <div class="c-form-field c-tooltip c-tooltip_validation c-tooltip_left is-tooltip-validation_invalid">
-          <label class="c-label" for="inputflc1237" >Tooltip at</label>
-          <input class="c-input c-input_is-error" id="inputflc1237" placeholder="left" type="text">
-          <span class="c-tooltip__content">Invalid content in field</span>
-        </div>
-      </div>
-      <div class="c-form-group">
-        <label class="c-label c-tooltip c-tooltip_validation c-tooltip_left is-tooltip-validation_invalid">
-          <span class="c-label__content">Tooltip at</span>
-          <input class="c-input c-input_is-error c-input_small" type="text" placeholder="left">
-          <span class="c-tooltip__content">Invalid content in field</span>
-        </label>
-      </div>
-    </div>
-    <div class="o-grid__cell o-grid__cell_width-33 o-box">
-      <div class="c-form-group">
-        <div class="c-form-field c-tooltip c-tooltip_validation c-tooltip_top-right is-tooltip-validation_invalid">
-          <label class="c-label" for="inputflc1238" >Tooltip at</label>
-          <input class="c-input c-input_is-error" id="inputflc1238" placeholder="top-right" type="text">
-          <span class="c-tooltip__content">Invalid content in field</span>
-        </div>
-      </div>
-      <div class="c-form-group">
-        <label class="c-label c-tooltip c-tooltip_validation c-tooltip_top-right is-tooltip-validation_invalid">
-          <span class="c-label__content">Tooltip at</span>
-          <input class="c-input c-input_is-error c-input_small" type="text" placeholder="top-right">
-          <span class="c-tooltip__content">Invalid content in field</span>
-        </label>
-      </div>
-    </div>
-    <div class="o-grid__cell o-grid__cell_width-33 o-box">
-      <div class="c-form-group">
-        <div class="c-form-field c-tooltip c-tooltip_validation c-tooltip_top is-tooltip-validation_invalid">
-          <label class="c-label" for="inputflc1239" >Tooltip at</label>
-          <input class="c-input c-input_is-error" id="inputflc1239" placeholder="top" type="text">
-          <span class="c-tooltip__content">Invalid content in field</span>
-        </div>
-      </div>
-      <div class="c-form-group">
-        <label class="c-label c-tooltip c-tooltip_validation c-tooltip_top is-tooltip-validation_invalid">
-          <span class="c-label__content">Tooltip at</span>
-          <input class="c-input c-input_is-error c-input_small" type="text" placeholder="top">
-          <span class="c-tooltip__content">Invalid content in field</span>
-        </label>
-      </div>
-    </div>
-    <div class="o-grid__cell o-grid__cell_width-33 o-box">
-      <div class="c-form-group">
-        <div class="c-form-field c-tooltip c-tooltip_validation c-tooltip_top-left is-tooltip-validation_invalid">
-          <label class="c-label" for="inputflc1240" >Tooltip at</label>
-          <input class="c-input c-input_is-error" id="inputflc1240" placeholder="top-left" type="text">
-          <span class="c-tooltip__content">Invalid content in field</span>
-        </div>
-      </div>
-      <div class="c-form-group">
-        <label class="c-label c-tooltip c-tooltip_validation c-tooltip_top-left is-tooltip-validation_invalid">
-          <span class="c-label__content">Tooltip at</span>
-          <input class="c-input c-input_is-error c-input_small" type="text" placeholder="top-left">
-          <span class="c-tooltip__content">Invalid content in field</span>
-        </label>
-      </div>
-    </div>
-  </div>
-</form>
-
-*/
-
-@mixin ids-tooltip-validation {
-  .c-tooltip_validation {
-    .c-input {
-      margin: 0;
-    }
-
-    > .c-input {
-      padding-right: 28px;
-    }
-
-    &:hover .c-tooltip__content {
-      visibility: hidden;
-      opacity: 0;
-    }
-  }
-
-  .is-tooltip-validation_invalid {
-    > .c-input,
-    .c-label + .c-input {
-      //border-bottom: 1px solid $ids-theme-status-error;
-      transition: none;
-
-      &:focus {
-        + .c-tooltip__content {
-          background: $ids-theme-status-error;
-          color: $color-base-white;
-          visibility: visible;
-          opacity: 1;
-        }
-      }
-    }
-
-    &,
-    &.c-tooltip_top-right {
-      > .c-input,
-      .c-label + .c-input {
-        &:focus {
-          + .c-tooltip__content {
-            left: 100%;
-            bottom: 36px;
-            right: auto;
-            margin-left: -14px;
-          }
-        }
-      }
-    }
-
-    &.c-tooltip_bottom-right {
-      > .c-input,
-      .c-label + .c-input {
-        &:focus {
-          + .c-tooltip__content {
-            left: 100%;
-            bottom: auto;
-            right: auto;
-            margin-left: -14px;
-          }
-        }
-      }
-    }
-
-    &.c-tooltip_right {
-      > .c-input,
-      .c-label + .c-input {
-        &:focus {
-          + .c-tooltip__content {
-            left: 100%;
-            bottom: auto;
-            right: auto;
-          }
-        }
-      }
-    }
-
-    &.c-tooltip_top-left {
-      > .c-input,
-      .c-label + .c-input {
-        &:focus {
-          + .c-tooltip__content {
-            right: 0;
-            bottom: 36px;
-            left: auto;
-            margin-right: 14px;
-          }
-        }
-      }
-    }
-
-    &.c-tooltip_left {
-      > .c-input,
-      .c-label + .c-input {
-        &:focus {
-          + .c-tooltip__content {
-            right: 100%;
-            bottom: auto;
-            left: auto;
-            margin-right: 14px;
-          }
-        }
-      }
-    }
-
-    &.c-tooltip_bottom-left {
-      > .c-input,
-      .c-label + .c-input {
-        &:focus {
-          + .c-tooltip__content {
-            right: 0;
-            bottom: auto;
-            left: auto;
-            margin-right: 14px;
-          }
-        }
-      }
-    }
-
-    &.c-tooltip_bottom {
-      > .c-input,
-      .c-label + .c-input {
-        &:focus {
-          + .c-tooltip__content {
-            right: 0;
-            bottom: auto;
-            margin-top: auto;
-            //left: auto;
-            margin-right: 14px;
-          }
-        }
-      }
-    }
-
-    /* stylelint-disable declaration-block-no-redundant-longhand-properties, declaration-no-important  */
-    &,
-    &.c-tooltip_top-right {
-      .c-tooltip__content::before {
-        border-left-color: $ids-theme-status-error;
-        border-top-color: $ids-theme-status-error;
-        border-right-color: transparent;
-        border-bottom-color: transparent;
-      }
-    }
-
-    &.c-tooltip_top-left {
-      .c-tooltip__content::before {
-        border-right-color: $ids-theme-status-error;
-        border-top-color: $ids-theme-status-error;
-        border-left-color: transparent;
-        border-bottom-color: transparent;
-      }
-    }
-
-    &.c-tooltip_top {
-      .c-tooltip__content::before {
-        border-right-color: transparent;
-        border-top-color: $ids-theme-status-error;
-        border-left-color: transparent;
-        border-bottom-color: transparent;
-      }
-    }
-
-    &.c-tooltip_bottom-right {
-      .c-tooltip__content::before {
-        border-left-color: $ids-theme-status-error;
-        border-bottom-color: $ids-theme-status-error;
-        border-right-color: transparent;
-        border-top-color: transparent;
-      }
-    }
-
-    &.c-tooltip_bottom {
-      .c-tooltip__content::before {
-        border-left-color: transparent;
-        border-bottom-color: $ids-theme-status-error;
-        border-right-color: transparent;
-        border-top-color: transparent;
-      }
-    }
-
-    &.c-tooltip_bottom-left {
-      .c-tooltip__content::before {
-        border-right-color: $ids-theme-status-error;
-        border-bottom-color: $ids-theme-status-error;
-        border-left-color: transparent;
-        border-top-color: transparent;
-      }
-    }
-
-    &.c-tooltip_left > .c-input:focus + .c-tooltip__content,
-    &.c-tooltip_left + .c-label + .c-input:focus + .c-tooltip__content {
-      right: 100%;
-      left: auto;
-      margin: 0 14px 0 0;
-
-      &::before {
-        border-top-color: $ids-theme-status-error;
-        border-left-color: $ids-theme-status-error;
-        border-bottom-color: transparent;
-        border-right-color: transparent;
-      }
-    }
-
-    &.c-tooltip_right > .c-input:focus + .c-tooltip__content,
-    &.c-tooltip_right + .c-label + .c-input:focus + .c-tooltip__content {
-      left: 100%;
-      right: auto;
-      margin: 0 0 0 14px;
-
-      &::before {
-        border-top-color: $ids-theme-status-error;
-        border-right-color: $ids-theme-status-error;
-        border-bottom-color: transparent;
-        border-left-color: transparent;
-      }
-    }
-
-    /* stylelint-enable */
-
-    &::before {
-      position: absolute;
-      content: "";
-      height: 16px;
-      width: 16px;
-      top: 35px;
-      right: 6px;
-      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%225%205%2026%2026%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cstyle%3E.clr-i-outline%7Bfill%3A%23a32100%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctitle%3Eexclamation-circle-line%3C%2Ftitle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-1%22%20d%3D%22M18%2C6A12%2C12%2C0%2C1%2C0%2C30%2C18%2C12%2C12%2C0%2C0%2C0%2C18%2C6Zm0%2C22A10%2C10%2C0%2C1%2C1%2C28%2C18%2C10%2C10%2C0%2C0%2C1%2C18%2C28Z%22%3E%3C%2Fpath%3E%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-2%22%20d%3D%22M18%2C20.07a1.3%2C1.3%2C0%2C0%2C1-1.3-1.3v-6a1.3%2C1.3%2C0%2C1%2C1%2C2.6%2C0v6A1.3%2C1.3%2C0%2C0%2C1%2C18%2C20.07Z%22%3E%3C%2Fpath%3E%3Ccircle%20class%3D%22clr-i-outline%20clr-i-outline-path-3%22%20cx%3D%2217.95%22%20cy%3D%2223.02%22%20r%3D%221.5%22%3E%3C%2Fcircle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E");
-      background-repeat: no-repeat;
-      background-size: contain;
-      vertical-align: middle;
-      margin: 0;
-    }
-  }
-}
-
-
-
+@use "../base/variables" as *;
+@use "../theme/variables" as *;
+@use "./variables" as *;
+@use "../typography/variables" as *;
+@use "../tools/tools.border-radius" as *;
+@use "../box-shadow/mixins" as *;
+
+@mixin ids-tooltip-core-styles {
+  @include ids-tooltip;
+  @include ids-tooltip-directions;
+  @include ids-tooltip-sizes;
+  @include ids-tooltip-validation;
+}
+
+/*
+Tooltip
+
+A tooltip provides a short description of a UI element.
+
+`.c-tooltip`
+
+This class wraps an actionable icon followed by the .c-tooltip__content to be shown on the icon. The content appears when the user hovers over the icon.
+
+`.c-tooltip__content`
+
+This class contains the text that will be shown when the tooltip is visible.
+
+- Use a verb phrase to describe the action on the icon, for example, “Edit settings.”
+- Use only plain text and be concise. Tooltips can be a sentence fragment.
+- If more detailed information is required, use another form of help.
+- Use sentence-style caps and no ending punctuation.
+
+markup:
+<div class="o-box o-box_large">
+  <a href="#" role="tooltip" aria-haspopup="true" class="c-tooltip">
+      <span class="fa fa-calendar"></span>
+      <span class="c-tooltip__content">Tooltip content</span>
+  </a>
+</div>
+
+*/
+
+@mixin ids-tooltip {
+  .c-tooltip {
+    display: block;
+    position: relative;
+    text-align: left;
+    overflow: visible;
+
+    &:hover,
+    &:focus {
+      .c-tooltip__content {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+    &:focus {
+      outline: 0;
+
+      &:first-child {
+        outline-offset: 1px;
+        outline-width: 1px;
+        outline-color: #3b99fc;
+        outline-style: solid;
+      }
+    }
+  }
+
+  .c-tooltip__content {
+    position: absolute;
+    width: auto;
+    margin: 0;
+    margin-bottom: $unit-small;
+    padding: 9px 12px;
+    font-size: 13px;
+    font-weight: 400;
+    letter-spacing: normal;
+    border-radius: 3px;
+    line-height: $line-height-computed;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.3s linear;
+    z-index: 1070;
+    background: $tooltip-bg;
+    @include ids-box-shadow-core-styles;
+    color: $tooltip-color;
+    white-space: normal;
+    text-transform: none;
+  }
+}
+
+/*
+Tooltip directions
+
+Tooltips support six directions, defined by using one of the following classes with the `.c-tooltip` class:
+- `.c-tooltip_top-right`
+- `.c-tooltip_top-left`
+- `.c-tooltip_bottom-right`
+- `.c-tooltip_bottom-left`
+- `.c-tooltip_right`
+- `.c-tooltip_left`
+
+markup:
+<div class="o-grid o-grid_wrap">
+	<div class="o-grid__cell o-grid__cell_width-33 o-box">
+	  <a href="#" role="tooltip" aria-haspopup="true" class="c-tooltip c-tooltip_bottom-right">
+      Bottom-right
+      <span class="c-tooltip__content">Tooltip content</span>
+    </a>
+	</div>
+	<div class="o-grid__cell o-grid__cell_width-33 o-box">
+	  <a href="#" role="tooltip" aria-haspopup="true" class="c-tooltip c-tooltip_bottom">
+      Bottom
+      <span class="c-tooltip__content">Tooltip content</span>
+    </a>
+	</div>
+	<div class="o-grid__cell o-grid__cell_width-33 o-box">
+	  <a href="#" role="tooltip" aria-haspopup="true" class="c-tooltip c-tooltip_bottom-left">
+      Bottom-left
+      <span class="c-tooltip__content">Tooltip content</span>
+    </a>
+	</div>
+	<div class="o-grid__cell o-grid__cell_width-33 o-box">
+	  <a href="#" role="tooltip" aria-haspopup="true" class="c-tooltip c-tooltip_right">
+      Right
+      <span class="c-tooltip__content">Tooltip content</span>
+    </a>
+	</div>
+	<div class="o-grid__cell o-grid__cell_width-33 o-box">
+	  <div>
+      No tooltip
+    </div>
+	</div>
+	<div class="o-grid__cell o-grid__cell_width-33 o-box">
+	  <a href="#" role="tooltip" aria-haspopup="true" class="c-tooltip c-tooltip_left">
+      Left
+      <span class="c-tooltip__content">Tooltip content</span>
+    </a>
+	</div>
+	<div class="o-grid__cell o-grid__cell_width-33 o-box">
+	  <a href="#" role="tooltip" aria-haspopup="true" class="c-tooltip c-tooltip_top-right">
+      Top-right
+      <span class="c-tooltip__content">Tooltip content</span>
+    </a>
+	</div>
+	<div class="o-grid__cell o-grid__cell_width-33 o-box">
+	  <a href="#" role="tooltip" aria-haspopup="true" class="c-tooltip c-tooltip_top">
+      Top
+      <span class="c-tooltip__content">Tooltip content</span>
+    </a>
+	</div>
+	<div class="o-grid__cell o-grid__cell_width-33 o-box">
+	  <a href="#" role="tooltip" aria-haspopup="true" class="c-tooltip c-tooltip_top-left">
+      Top-left
+      <span class="c-tooltip__content">Tooltip content</span>
+    </a>
+	</div>
+</div>
+
+*/
+
+@mixin ids-tooltip-directions {
+  .c-tooltip,
+  .c-tooltip_top-right {
+    > .c-tooltip__content {
+      top: auto;
+      bottom: 0%;
+      left: 10%;
+      right: auto;
+      border-bottom-left-radius: 0;
+
+      &::before {
+        position: absolute;
+        bottom: -9px;
+        left: 0;
+        top: auto;
+        right: auto;
+        content: "";
+        border-left: 6px solid $tooltip-bg;
+        border-top: 5px solid $tooltip-bg;
+        border-right: 6px solid transparent;
+        border-bottom: 5px solid transparent;
+      }
+    }
+  }
+
+  .c-tooltip_top-left > .c-tooltip__content {
+    top: auto;
+    bottom: 100%;
+    right: 50%;
+    left: auto;
+    border-bottom-right-radius: 0;
+
+    &::before {
+      bottom: -9px;
+      right: 0;
+      top: auto;
+      left: auto;
+      content: "";
+      border-right: 6px solid $tooltip-bg;
+      border-top: 5px solid $tooltip-bg;
+      border-left: 6px solid transparent;
+      border-bottom: 5px solid transparent;
+    }
+  }
+
+  .c-tooltip_bottom-right > .c-tooltip__content {
+    bottom: auto;
+    top: 100%;
+    left: 50%;
+    right: auto;
+    margin-top: $unit-small;
+    border-top-left-radius: 0;
+
+    &::before {
+      top: -9px;
+      left: 0;
+      bottom: auto;
+      right: auto;
+      content: "";
+      border-left: 6px solid $tooltip-bg;
+      border-bottom: 5px solid $tooltip-bg;
+      border-right: 6px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+
+  .c-tooltip_bottom-left > .c-tooltip__content {
+    bottom: auto;
+    top: 100%;
+    right: 50%;
+    left: auto;
+    margin-top: $unit-small;
+    border-top-right-radius: 0;
+
+    &::before {
+      top: -9px;
+      right: 0;
+      bottom: auto;
+      left: auto;
+      content: "";
+      border-right: 6px solid $tooltip-bg;
+      border-bottom: 5px solid $tooltip-bg;
+      border-left: 6px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+
+  .c-tooltip_bottom > .c-tooltip__content {
+    bottom: auto;
+    top: 100%;
+    transform: translateX(-50%) translateY(8px);
+
+    &::before {
+      position: absolute;
+      top: -10px;
+      right: calc(50% - 6px);
+      bottom: auto;
+      left: auto;
+      content: "";
+      border-right: 6px solid transparent;
+      border-bottom: 5px solid $tooltip-bg;
+      border-left: 6px solid transparent;
+      border-top: 5px solid transparent;
+    }
+  }
+
+  .c-tooltip_right > .c-tooltip__content {
+    right: auto;
+    left: 100%;
+    top: 50%;
+    bottom: auto;
+    margin-left: $unit-small;
+    border-top-left-radius: 0;
+
+    &::before {
+      top: 0;
+      left: -9px;
+      bottom: auto;
+      right: auto;
+      content: "";
+      border-top: 6px solid $tooltip-bg;
+      border-right: 5px solid $tooltip-bg;
+      border-bottom: 6px solid transparent;
+      border-left: 5px solid transparent;
+    }
+  }
+
+  .c-tooltip_left > .c-tooltip__content {
+    left: auto;
+    right: 100%;
+    top: 50%;
+    bottom: auto;
+    margin-right: $unit-small;
+    border-top-right-radius: 0;
+
+    &::before {
+      top: 0;
+      right: -9px;
+      bottom: auto;
+      left: auto;
+      content: "";
+      border-top: 6px solid $tooltip-bg;
+      border-left: 5px solid $tooltip-bg;
+      border-bottom: 6px solid transparent;
+      border-right: 5px solid transparent;
+    }
+  }
+
+  .c-tooltip_top > .c-tooltip__content {
+    top: auto;
+    bottom: 100%;
+    transform: translateX(-50%) translateY(8px);
+
+    &::before {
+      position: absolute;
+      bottom: -10px;
+      right: calc(50% - 6px);
+      top: auto;
+      left: auto;
+      content: "";
+      border-right: 6px solid transparent;
+      border-top: 5px solid $tooltip-bg;
+      border-left: 6px solid transparent;
+      border-bottom: 5px solid transparent;
+    }
+  }
+}
+
+/*
+Tooltip sizes
+
+Set a width that accommodates the text string. The default is 240 px. Other choices are 72 px, 120 px, and 360 px.
+- `.c-tooltip_xs` - 72px,
+- `.c-tooltip_sm` - 120px,
+- `.c-tooltip_lg` - 360px
+
+markup:
+<div class="o-box o-box_large">
+  <button class="c-btn c-tooltip c-tooltip_xs" role="tooltip" aria-haspopup="true">
+  	xsmall
+  	<span class="c-tooltip__content">width = 72px</span>
+  </button>
+  <button class="c-btn c-tooltip c-tooltip_sm" role="tooltip" aria-haspopup="true">
+  	small
+  	<span class="c-tooltip__content">width = 120px</span>
+  </button>
+  <button class="c-btn c-tooltip" role="tooltip" aria-haspopup="true">
+  	default
+  	<span class="c-tooltip__content">width = 240px</span>
+  </button>
+  <button class="c-btn c-tooltip c-tooltip_lg" role="tooltip" aria-haspopup="true">
+  	large
+  	<span class="c-tooltip__content">width = 360px</span>
+  </button>
+</div>
+
+*/
+
+@mixin ids-tooltip-sizes {
+  .c-tooltip_xs > .c-tooltip__content {
+    width: 72px;
+  }
+
+  .c-tooltip_sm > .c-tooltip__content {
+    width: 120px;
+  }
+
+  .c-tooltip_md > .c-tooltip__content {
+    width: 240px;
+  }
+
+  .c-tooltip_lg > .c-tooltip__content {
+    width: 360px;
+  }
+
+  .c-tooltip,
+  .c-tooltip_top-left,
+  .c-tooltip_top-right {
+    > .c-btn + .c-tooltip__content {
+      margin-bottom: 10px;
+    }
+  }
+
+  .c-tooltip_bottom-left,
+  .c-tooltip_bottom-right {
+    > .c-btn + .c-tooltip__content {
+      margin-top: 10px;
+    }
+  }
+
+  .c-tooltip_right > .c-btn + .c-tooltip__content {
+    margin-left: 4px;
+  }
+}
+
+/*
+Tooltip-based validation messages
+
+Works on both field layouts. Instead of default tooltip validation tooltip fires on `:focus` event.
+
+Top, top-left and top-right tooltip variants are preferred.
+
+markup:
+<form class="c-form c-form_compact">
+  <div class="c-form-group">
+    <div class="c-form-field c-tooltip c-tooltip_validation c-tooltip_top-right is-tooltip-validation_invalid">
+      <label class="c-label" for="inputflc12" >Input-label siblings layout</label>
+      <input class="c-input c-input_is-error" id="inputflc12" placeholder="Type something..." type="text">
+      <span class="c-tooltip__content">Invalid content in field</span>
+    </div>
+  </div>
+  <div class="c-form-group">
+    <label class="c-label c-tooltip c-tooltip_validation c-tooltip_top-right is-tooltip-validation_invalid">
+      <span class="c-label__content">Input wrapped with label layout</span>
+      <input class="c-input c-input_is-error c-input_block" type="text" placeholder="Type something...">
+      <span class="c-tooltip__content">Invalid content in field</span>
+    </label>
+  </div>
+  <div class="c-form-group">
+    <div class="c-form-field c-tooltip c-tooltip_validation c-tooltip_bottom-right is-tooltip-validation_invalid">
+      <label class="c-label" for="inputflc12" >Input-label siblings layout</label>
+      <input class="c-input c-input_is-error" id="inputflc12" placeholder="Type something..." type="text">
+      <span class="c-tooltip__content">Invalid content in field</span>
+    </div>
+  </div>
+  <div class="c-form-group">
+    <label class="c-label c-tooltip c-tooltip_validation c-tooltip_bottom-right is-tooltip-validation_invalid">
+      <span class="c-label__content">Input wrapped with label layout</span>
+      <input class="c-input c-input_is-error c-input_block" type="text" placeholder="Type something...">
+      <span class="c-tooltip__content">Invalid content in field</span>
+    </label>
+  </div>
+  <div class="c-form-group">
+    <label class="c-checkbox c-checkbox_inline">
+      <input type="checkbox" class="c-checkbox__input">
+      <i class="c-checkbox__icon"></i>
+      <span class="c-checkbox__label">Check this</span>
+    </label>
+    <label class="c-checkbox c-checkbox_inline">
+      <input type="checkbox" class="c-checkbox__input">
+      <i class="c-checkbox__icon"></i>
+      <span class="c-checkbox__label">Check this</span>
+    </label>
+  </div>
+  <div class="o-grid o-grid_wrap">
+    <div class="o-grid__cell o-grid__cell_width-33 o-box">
+      <div class="c-form-group">
+        <div class="c-form-field c-tooltip c-tooltip_validation c-tooltip_bottom-right is-tooltip-validation_invalid">
+          <label class="c-label" for="inputflc1233" >Tooltip at</label>
+          <input class="c-input c-input_is-error" id="inputflc1233" placeholder="bottom-right" type="text">
+          <span class="c-tooltip__content">Invalid content in field</span>
+        </div>
+      </div>
+      <div class="c-form-group">
+        <label class="c-label c-tooltip c-tooltip_validation c-tooltip_bottom-right is-tooltip-validation_invalid">
+          <span class="c-label__content">Tooltip at</span>
+          <input class="c-input c-input_is-error c-input_small" type="text" placeholder="bottom-right">
+          <span class="c-tooltip__content">Invalid content in field</span>
+        </label>
+      </div>
+    </div>
+    <div class="o-grid__cell o-grid__cell_width-33 o-box">
+      <div class="c-form-group">
+        <div class="c-form-field c-tooltip c-tooltip_validation c-tooltip_bottom is-tooltip-validation_invalid">
+          <label class="c-label" for="inputflc1234" >Tooltip at</label>
+          <input class="c-input c-input_is-error" id="inputflc1234" placeholder="bottom" type="text">
+          <span class="c-tooltip__content">Invalid content in field</span>
+        </div>
+      </div>
+      <div class="c-form-group">
+        <label class="c-label c-tooltip c-tooltip_validation c-tooltip_bottom is-tooltip-validation_invalid">
+          <span class="c-label__content">Tooltip at</span>
+          <input class="c-input c-input_is-error c-input_small" type="text" placeholder="bottom">
+          <span class="c-tooltip__content">Invalid content in field</span>
+        </label>
+      </div>
+    </div>
+    <div class="o-grid__cell o-grid__cell_width-33 o-box">
+      <div class="c-form-group">
+        <div class="c-form-field c-tooltip c-tooltip_validation c-tooltip_bottom-left is-tooltip-validation_invalid">
+          <label class="c-label" for="inputflc1235" >Tooltip at</label>
+          <input class="c-input c-input_is-error" id="inputflc1235" placeholder="bottom-left" type="text">
+          <span class="c-tooltip__content">Invalid content in field</span>
+        </div>
+      </div>
+      <div class="c-form-group">
+        <label class="c-label c-tooltip c-tooltip_validation c-tooltip_bottom-left is-tooltip-validation_invalid">
+          <span class="c-label__content">Tooltip at</span>
+          <input class="c-input c-input_is-error c-input_small" type="text" placeholder="bottom-left">
+          <span class="c-tooltip__content">Invalid content in field</span>
+        </label>
+      </div>
+    </div>
+    <div class="o-grid__cell o-grid__cell_width-33 o-box">
+      <div class="c-form-group">
+        <div class="c-form-field c-tooltip c-tooltip_validation c-tooltip_right is-tooltip-validation_invalid">
+          <label class="c-label" for="inputflc1236" >Tooltip at</label>
+          <input class="c-input c-input_is-error" id="inputflc1236" placeholder="right" type="text">
+          <span class="c-tooltip__content">Invalid content in field</span>
+        </div>
+      </div>
+      <div class="c-form-group">
+        <label class="c-label c-tooltip c-tooltip_validation c-tooltip_right is-tooltip-validation_invalid">
+          <span class="c-label__content">Tooltip at</span>
+          <input class="c-input c-input_is-error c-input_small" type="text" placeholder="right">
+          <span class="c-tooltip__content">Invalid content in field</span>
+        </label>
+      </div>
+    </div>
+    <div class="o-grid__cell o-grid__cell_width-33 o-box">
+      <div>
+        No tooltip
+      </div>
+    </div>
+    <div class="o-grid__cell o-grid__cell_width-33 o-box">
+      <div class="c-form-group">
+        <div class="c-form-field c-tooltip c-tooltip_validation c-tooltip_left is-tooltip-validation_invalid">
+          <label class="c-label" for="inputflc1237" >Tooltip at</label>
+          <input class="c-input c-input_is-error" id="inputflc1237" placeholder="left" type="text">
+          <span class="c-tooltip__content">Invalid content in field</span>
+        </div>
+      </div>
+      <div class="c-form-group">
+        <label class="c-label c-tooltip c-tooltip_validation c-tooltip_left is-tooltip-validation_invalid">
+          <span class="c-label__content">Tooltip at</span>
+          <input class="c-input c-input_is-error c-input_small" type="text" placeholder="left">
+          <span class="c-tooltip__content">Invalid content in field</span>
+        </label>
+      </div>
+    </div>
+    <div class="o-grid__cell o-grid__cell_width-33 o-box">
+      <div class="c-form-group">
+        <div class="c-form-field c-tooltip c-tooltip_validation c-tooltip_top-right is-tooltip-validation_invalid">
+          <label class="c-label" for="inputflc1238" >Tooltip at</label>
+          <input class="c-input c-input_is-error" id="inputflc1238" placeholder="top-right" type="text">
+          <span class="c-tooltip__content">Invalid content in field</span>
+        </div>
+      </div>
+      <div class="c-form-group">
+        <label class="c-label c-tooltip c-tooltip_validation c-tooltip_top-right is-tooltip-validation_invalid">
+          <span class="c-label__content">Tooltip at</span>
+          <input class="c-input c-input_is-error c-input_small" type="text" placeholder="top-right">
+          <span class="c-tooltip__content">Invalid content in field</span>
+        </label>
+      </div>
+    </div>
+    <div class="o-grid__cell o-grid__cell_width-33 o-box">
+      <div class="c-form-group">
+        <div class="c-form-field c-tooltip c-tooltip_validation c-tooltip_top is-tooltip-validation_invalid">
+          <label class="c-label" for="inputflc1239" >Tooltip at</label>
+          <input class="c-input c-input_is-error" id="inputflc1239" placeholder="top" type="text">
+          <span class="c-tooltip__content">Invalid content in field</span>
+        </div>
+      </div>
+      <div class="c-form-group">
+        <label class="c-label c-tooltip c-tooltip_validation c-tooltip_top is-tooltip-validation_invalid">
+          <span class="c-label__content">Tooltip at</span>
+          <input class="c-input c-input_is-error c-input_small" type="text" placeholder="top">
+          <span class="c-tooltip__content">Invalid content in field</span>
+        </label>
+      </div>
+    </div>
+    <div class="o-grid__cell o-grid__cell_width-33 o-box">
+      <div class="c-form-group">
+        <div class="c-form-field c-tooltip c-tooltip_validation c-tooltip_top-left is-tooltip-validation_invalid">
+          <label class="c-label" for="inputflc1240" >Tooltip at</label>
+          <input class="c-input c-input_is-error" id="inputflc1240" placeholder="top-left" type="text">
+          <span class="c-tooltip__content">Invalid content in field</span>
+        </div>
+      </div>
+      <div class="c-form-group">
+        <label class="c-label c-tooltip c-tooltip_validation c-tooltip_top-left is-tooltip-validation_invalid">
+          <span class="c-label__content">Tooltip at</span>
+          <input class="c-input c-input_is-error c-input_small" type="text" placeholder="top-left">
+          <span class="c-tooltip__content">Invalid content in field</span>
+        </label>
+      </div>
+    </div>
+  </div>
+</form>
+
+*/
+
+@mixin ids-tooltip-validation {
+  .c-tooltip_validation {
+    .c-input {
+      margin: 0;
+    }
+
+    > .c-input {
+      padding-right: 28px;
+    }
+
+    &:hover .c-tooltip__content {
+      visibility: hidden;
+      opacity: 0;
+    }
+  }
+
+  .is-tooltip-validation_invalid {
+    > .c-input,
+    .c-label + .c-input {
+      //border-bottom: 1px solid $ids-theme-status-error;
+      transition: none;
+
+      &:focus {
+        + .c-tooltip__content {
+          background: $ids-theme-status-error;
+          color: $color-base-white;
+          visibility: visible;
+          opacity: 1;
+        }
+      }
+    }
+
+    &,
+    &.c-tooltip_top-right {
+      > .c-input,
+      .c-label + .c-input {
+        &:focus {
+          + .c-tooltip__content {
+            left: 100%;
+            bottom: 36px;
+            right: auto;
+            margin-left: -14px;
+          }
+        }
+      }
+    }
+
+    &.c-tooltip_bottom-right {
+      > .c-input,
+      .c-label + .c-input {
+        &:focus {
+          + .c-tooltip__content {
+            left: 100%;
+            bottom: auto;
+            right: auto;
+            margin-left: -14px;
+          }
+        }
+      }
+    }
+
+    &.c-tooltip_right {
+      > .c-input,
+      .c-label + .c-input {
+        &:focus {
+          + .c-tooltip__content {
+            left: 100%;
+            bottom: auto;
+            right: auto;
+          }
+        }
+      }
+    }
+
+    &.c-tooltip_top-left {
+      > .c-input,
+      .c-label + .c-input {
+        &:focus {
+          + .c-tooltip__content {
+            right: 0;
+            bottom: 36px;
+            left: auto;
+            margin-right: 14px;
+          }
+        }
+      }
+    }
+
+    &.c-tooltip_left {
+      > .c-input,
+      .c-label + .c-input {
+        &:focus {
+          + .c-tooltip__content {
+            right: 100%;
+            bottom: auto;
+            left: auto;
+            margin-right: 14px;
+          }
+        }
+      }
+    }
+
+    &.c-tooltip_bottom-left {
+      > .c-input,
+      .c-label + .c-input {
+        &:focus {
+          + .c-tooltip__content {
+            right: 0;
+            bottom: auto;
+            left: auto;
+            margin-right: 14px;
+          }
+        }
+      }
+    }
+
+    &.c-tooltip_bottom {
+      > .c-input,
+      .c-label + .c-input {
+        &:focus {
+          + .c-tooltip__content {
+            right: 0;
+            bottom: auto;
+            margin-top: auto;
+            //left: auto;
+            margin-right: 14px;
+          }
+        }
+      }
+    }
+
+    /* stylelint-disable declaration-block-no-redundant-longhand-properties, declaration-no-important  */
+    &,
+    &.c-tooltip_top-right {
+      .c-tooltip__content::before {
+        border-left-color: $ids-theme-status-error;
+        border-top-color: $ids-theme-status-error;
+        border-right-color: transparent;
+        border-bottom-color: transparent;
+      }
+    }
+
+    &.c-tooltip_top-left {
+      .c-tooltip__content::before {
+        border-right-color: $ids-theme-status-error;
+        border-top-color: $ids-theme-status-error;
+        border-left-color: transparent;
+        border-bottom-color: transparent;
+      }
+    }
+
+    &.c-tooltip_top {
+      .c-tooltip__content::before {
+        border-right-color: transparent;
+        border-top-color: $ids-theme-status-error;
+        border-left-color: transparent;
+        border-bottom-color: transparent;
+      }
+    }
+
+    &.c-tooltip_bottom-right {
+      .c-tooltip__content::before {
+        border-left-color: $ids-theme-status-error;
+        border-bottom-color: $ids-theme-status-error;
+        border-right-color: transparent;
+        border-top-color: transparent;
+      }
+    }
+
+    &.c-tooltip_bottom {
+      .c-tooltip__content::before {
+        border-left-color: transparent;
+        border-bottom-color: $ids-theme-status-error;
+        border-right-color: transparent;
+        border-top-color: transparent;
+      }
+    }
+
+    &.c-tooltip_bottom-left {
+      .c-tooltip__content::before {
+        border-right-color: $ids-theme-status-error;
+        border-bottom-color: $ids-theme-status-error;
+        border-left-color: transparent;
+        border-top-color: transparent;
+      }
+    }
+
+    &.c-tooltip_left > .c-input:focus + .c-tooltip__content,
+    &.c-tooltip_left + .c-label + .c-input:focus + .c-tooltip__content {
+      right: 100%;
+      left: auto;
+      margin: 0 14px 0 0;
+
+      &::before {
+        border-top-color: $ids-theme-status-error;
+        border-left-color: $ids-theme-status-error;
+        border-bottom-color: transparent;
+        border-right-color: transparent;
+      }
+    }
+
+    &.c-tooltip_right > .c-input:focus + .c-tooltip__content,
+    &.c-tooltip_right + .c-label + .c-input:focus + .c-tooltip__content {
+      left: 100%;
+      right: auto;
+      margin: 0 0 0 14px;
+
+      &::before {
+        border-top-color: $ids-theme-status-error;
+        border-right-color: $ids-theme-status-error;
+        border-bottom-color: transparent;
+        border-left-color: transparent;
+      }
+    }
+
+    /* stylelint-enable */
+
+    &::before {
+      position: absolute;
+      content: "";
+      height: 16px;
+      width: 16px;
+      top: 35px;
+      right: 6px;
+      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%225%205%2026%2026%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cstyle%3E.clr-i-outline%7Bfill%3A%23a32100%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctitle%3Eexclamation-circle-line%3C%2Ftitle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-1%22%20d%3D%22M18%2C6A12%2C12%2C0%2C1%2C0%2C30%2C18%2C12%2C12%2C0%2C0%2C0%2C18%2C6Zm0%2C22A10%2C10%2C0%2C1%2C1%2C28%2C18%2C10%2C10%2C0%2C0%2C1%2C18%2C28Z%22%3E%3C%2Fpath%3E%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-2%22%20d%3D%22M18%2C20.07a1.3%2C1.3%2C0%2C0%2C1-1.3-1.3v-6a1.3%2C1.3%2C0%2C1%2C1%2C2.6%2C0v6A1.3%2C1.3%2C0%2C0%2C1%2C18%2C20.07Z%22%3E%3C%2Fpath%3E%3Ccircle%20class%3D%22clr-i-outline%20clr-i-outline-path-3%22%20cx%3D%2217.95%22%20cy%3D%2223.02%22%20r%3D%221.5%22%3E%3C%2Fcircle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E");
+      background-repeat: no-repeat;
+      background-size: contain;
+      vertical-align: middle;
+      margin: 0;
+    }
+  }
+}
+
+
+