Popup with relative position

by JakobJingleheimer

HTML

<div class="ui popup-container">
  <div class="original-class">
    In pretium id diam in euismod. Proin pulvinar consectetur venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin egestas tristique congue. Integer scelerisque massa magna, eu hendrerit nisl aliquet.
  </div>
  <div class="ui right center popup">
    Suspendisse fermentum mauris eu augue consectetur, ac facilisis mauris blandit.
  </div>
</div>

SCSS

.original-class {
  background-color: rgba(225, 255, 255, 0.5);
  max-width: 10em;
  padding: 0.5em;
}

.ui.popup-container {
  display: inline-block;
  position: relative;
  
  .ui.popup {
    border: 1px solid rgba(0, 0, 0, .5);
    display: block;
    margin: -0.2em;
    padding: 0.2em;
    position: absolute;
    
    &[class*="right center"] {
      right: -0.2em;
      transform: translate(100%, -50%);
      top: 50%;
    }
  }
}