<div class="box" data-tip="hello,&#xa;John.">
  
</div>
.box{
  width: 100px;
  height: 100px;
  background: pink;
  position: relative;
}
.box::after{
  display: block;
  position:absolute;
  content: attr(data-tip);
  padding: 10px;
  background: #eee;
  right: -80px;
  white-space: pre;
  width: 60px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.