There are no notes for this item.

<p class="trigger-tooltip">
    Large
    <span class="tooltip tooltip--large tooltip--bottom">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra risus.
  </span>
</p>
  • Content:
    /*------------------------------------*\
        #TOOLTIP
    \*------------------------------------*/
    
    .trigger-tooltip {
      position: relative;
      float: left;
    }
    
    .tooltip {
      display: none;
      background-color: $background-default;
      border: 1px solid $border-tooltip;
      font-size: 12px;
      color: $color-tooltip;
      padding: 5px;
      position: absolute;
      z-index: 2;
      border-radius: 2px;
      text-align: left;
    }
    
    .tooltip--large {
      width: 160px;
    }
    
    .trigger-tooltip:hover .tooltip,
    .contextual-menu--active .tooltip {
      display: block;
    }
    
    .trigger-tooltip:hover .tooltip--top,
    .contextual-menu--active .tooltip--top {
      bottom: 20px;
      left: 0;
    }
    
    .trigger-tooltip:hover .tooltip--contextual.tooltip--top,
    .trigger-tooltip:hover .tooltip--contextual.tooltip--top-left,
    .trigger-tooltip:hover .tooltip--contextual.tooltip--top-right,
    .contextual-menu--active .tooltip--contextual.tooltip--top,
    .contextual-menu--active .tooltip--contextual.tooltip--top-left,
    .contextual-menu--active .tooltip--contextual.tooltip--top-right {
      bottom: 25px;
    }
    
    .trigger-tooltip:hover .tooltip--right,
    .contextual-menu--active .tooltip--right {
      top: -25%;
      left: calc(100% + 5px);
    }
    
    .trigger-tooltip:hover .tooltip--contextual.tooltip--right,
    .contextual-menu--active .tooltip--contextual.tooltip--right {
      left: calc(100% + 10px);
    }
    
    .trigger-tooltip:hover .tooltip--bottom,
    .contextual-menu--active .tooltip--bottom {
      top: 20px;
      left: 0;
    }
    
    .trigger-tooltip:hover .tooltip--contextual.tooltip--bottom,
    .trigger-tooltip:hover .tooltip--contextual.tooltip--bottom-left,
    .trigger-tooltip:hover .tooltip--contextual.tooltip--bottom-right,
    .contextual-menu--active .tooltip--contextual.tooltip--bottom,
    .contextual-menu--active .tooltip--contextual.tooltip--bottom-left,
    .contextual-menu--active .tooltip--contextual.tooltip--bottom-right {
      top: 25px;
    }
    
    .trigger-tooltip:hover .tooltip--left,
    .contextual-menu--active .tooltip--left {
      top: -25%;
      right: calc(100% + 5px);
    }
    
    .trigger-tooltip:hover .tooltip--contextual.tooltip--left,
    .contextual-menu--active .tooltip--contextual.tooltip--left {
      right: calc(100% + 10px);
    }
    
    .input-box--error:focus ~ .tooltip--error,
    .input-box--error[checked] ~ .tooltip--error {
      display: block;
      position: absolute;
      bottom: 75%;
      left: 80%;
    }
    
    .input-box--error:focus ~ .contextual-menu .tooltip,
    .input-box--error[checked] ~ .contextual-menu .tooltip {
      bottom: inherit;
      top: 25px;
    }
    
    .input-box--error:focus ~ .contextual-menu .tooltip:before,
    .input-box--error[checked] ~ .contextual-menu .tooltip:before {
      border-width: 0 6px 8px 6px;
      border-color: transparent transparent $border-tooltip;
      bottom: inherit;
      top: -8px;
    }
    
    .input-box--error:focus ~ .contextual-menu .tooltip:after,
    .input-box--error[checked] ~ .contextual-menu .tooltip:after {
      border-width: 0 5px 7px 5px;
      border-color: transparent transparent $border-tooltip-inner;
      bottom: inherit;
      top: -7px;
    }
    
    .form__hint {
      position: absolute;
      color: inherit;
      margin: -10px 5px 0;
    }
    
  • URL: /components/raw/tooltip/tooltip.scss
  • Filesystem Path: components/02-atoms/11-tooltip/tooltip.scss
  • Size: 3 KB