tooltip

needs prefixes tho

by _nK

HTML

<div class="wrapper">

  <span>[ ¿ ]
    <div class="tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing
      elit. Dolor fugit provident eligendi quas unde, ad.
    </div>
  </span>
  
</div>

CSS

.wrapper > span {
   position: relative;
  display: inline-flex; align-items: flex-start
 }

.wrapper > span > .tooltip {
  position: absolute;
  padding: 1em;
  left: 50%;
  bottom: 100%;
  max-width: 300px;
  background: #bdc3c7;
  word-wrap: break-word;
  white-space: pre-line;
  transform: translate(-50%,-110%)
  
}





body { padding: 200px; font: 16px/1.5 sans-serif }