Hint

by Stas Raranetskyi

HTML

<div class="wrap">
  <div class="hint">
      Lorem ipsum dolor sit amet
  </div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid numquam cum eos similique, optio cupiditate debitis nisi adipisci perferendis, dolorum minima modi fugiat nobis aspernatur nulla iste aperiam enim at.
</div>

CSS

.wrap {
  position: relative;
}

.wrap::before {
   content: '';
   position: fixed;
   width: 92px;
   height: 20px;
   left: 5px;
   box-shadow: 0 0 1000vw 1000vh rgba(0, 0, 0, 0.7);
}

.hint {
  position: absolute;
  top: 30px;
  left: -3px;
  z-index: 10;
  background: #fff;
  padding: 0 5px;
}

.hint::before {
   content: '';
   position: absolute;
   bottom: 100%;
   left: 10px;
   border: 8px solid transparent;
   border-bottom-color: #fff;
}