Cisco Atomic Pattern Library

Inline error 

<!-- Default -->
<span class="tooltip tooltip--contextual tooltip--error tooltip--default tooltip--bottom">
  <span class="tooltip__error"></span> ERROR message
</span>


<!-- Large -->
<span class="tooltip tooltip--contextual tooltip--error tooltip--large tooltip--bottom">
  <span class="tooltip__error"></span> ERROR message
</span>


<!-- Right -->
<span class="tooltip tooltip--contextual tooltip--error tooltip--default tooltip--right">
  <span class="tooltip__error"></span> ERROR message
</span>


<!-- Top -->
<span class="tooltip tooltip--contextual tooltip--error tooltip--default tooltip--top">
  <span class="tooltip__error"></span> ERROR message
</span>


<!-- Top Left -->
<span class="tooltip tooltip--contextual tooltip--error tooltip--default tooltip--top-left">
  <span class="tooltip__error"></span> ERROR message
</span>


<!-- Left -->
<span class="tooltip tooltip--contextual tooltip--error tooltip--default tooltip--left">
  <span class="tooltip__error"></span> ERROR message
</span>


<!-- Bottom Left -->
<span class="tooltip tooltip--contextual tooltip--error tooltip--default tooltip--bottom-left">
  <span class="tooltip__error"></span> ERROR message
</span>
  • Content: 
    /*------------------------------------*\
    #MESSAGING INLINE
\*------------------------------------*/

// Check Tooltip CSS
// Check Contextual Menu CSS

.tooltip__error {
  background-color: $background-error;
  height: calc(100% + 2px);
  display: block;
  width: 30px;
  position: absolute;
  top: -1px;
}

.tooltip--right .tooltip__error,
.tooltip--top .tooltip__error,
.tooltip--bottom .tooltip__error,
.tooltip--top-right .tooltip__error,
.tooltip--bottom-right .tooltip__error {
  left: 0;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

.tooltip--right.tooltip--error,
.tooltip--top.tooltip--error,
.tooltip--bottom.tooltip--error,
.tooltip--top-right.tooltip--error,
.tooltip--bottom-right.tooltip--error {
  border-left: none;
  padding-left: 35px;
}

.tooltip--left .tooltip__error,
.tooltip--top-left .tooltip__error,
.tooltip--bottom-left .tooltip__error {
  right: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.tooltip--left.tooltip--error,
.tooltip--top-left.tooltip--error,
.tooltip--bottom-left.tooltip--error {
  border-right: none;
  padding-right: 35px;
}

.tooltip__error:after {
  content: "\00d7";
  border-radius: $radius-circle;
  background-color: $background-default;
  color: $color-error;
  font-size: 20px;
  font-weight: 900;
  display: block;
  top: calc(50% - 7px);
  position: absolute;
  left: calc(50% - 7px);
  padding: 7px 0 6px 1px;
  line-height: 0;
}

.tooltip--error.tooltip--top:after,
.tooltip--error.tooltip--top-left:after,
.tooltip--error.tooltip--top-right:after {
  border-color: $border-error transparent transparent;
}

.tooltip--error.tooltip--top:before,
.tooltip--error.tooltip--top-left:before,
.tooltip--error.tooltip--top-right:before {
  border-color: $border-error transparent transparent;
}

.tooltip--error.tooltip--right:after {
  border-color: transparent $border-error transparent transparent;
}

.tooltip--error.tooltip--right:before {
  border-color: transparent $border-error transparent transparent;
}

.tooltip--error.tooltip--bottom:after,
.tooltip--error.tooltip--bottom-left:after,
.tooltip--error.tooltip--bottom-right:after {
  border-color: transparent transparent $border-error;
}

.tooltip--error.tooltip--bottom:before,
.tooltip--error.tooltip--bottom-left:before,
.tooltip--error.tooltip--bottom-right:before {
  border-color: transparent transparent $border-error;
}

.tooltip--error.tooltip--left:after {
  border-color: transparent transparent transparent $border-error;
}

.tooltip--error.tooltip--left:before {
  border-color: transparent transparent transparent $border-error;
}

.tooltip--error.tooltip--left:after,
.tooltip--error.tooltip--right:after {
  top: 8px;
}

.tooltip--error.tooltip--left:before,
.tooltip--error.tooltip--right:before {
  top: 7px;
}

.tooltip--error.tooltip--top:after,
.tooltip--error.tooltip--top-right:after,
.tooltip--error.tooltip--bottom:after,
.tooltip--error.tooltip--bottom-right:after {
  left: 10px;
}

.tooltip--error.tooltip--top:before,
.tooltip--error.tooltip--top-right:before,
.tooltip--error.tooltip--bottom:before,
.tooltip--error.tooltip--bottom-right:before {
  left: 9px;
}

.tooltip--error.tooltip--top-left:after,
.tooltip--error.tooltip--bottom-left:after {
  right: 10px;
}

.tooltip--error.tooltip--top-left:before,
.tooltip--error.tooltip--bottom-left:before {
  right: 9px;
}
  • URL: /components/raw/messaging-inline/messaging-inline.scss
  • Filesystem Path: components/02-atoms/20-messaging-inline/messaging-inline.scss
  • Size: 3.4 KB