/*
Tooltip from css

Tooltip from trimble css

Markup:
<div class="tooltip">Hover over me - Left tooltip
  <span class="tooltip-text">Tooltip text</span>
</div><br/>
<div class="tooltip">Hover over me - Right tooltip
  <span class="tooltip-text right">Tooltip text</span>
</div><br/>
<div class="tooltip-container">
  <input type="text" value="error field" style="width:200px;"/>
  <span class="tooltip-text">Tooltip text</span>
</div>

Styleguide UI Elements.tooltip
*/
@import 'colors.scss';
@import 'variables.scss';

.tooltip-text {
    visibility: hidden;
    width: 140px;
    background-color: $col_black;
    color: $col_white;
    text-align: center;
    @include border-radius(6px);
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    right: -130px;
    &.right {
       right: 0;
       left: -10px;
    }
    &::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%;
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent $col_black transparent transparent;
    }
    &.right::after{
      left: 100%;
      right: 0;
      border-color: transparent transparent transparent $col_black;
    }
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted $col_black;
    &:hover .tooltip-text {
        visibility: visible;
    }
}