Tooltip with HTML content without JavaScript

Question

There are plenty of JavaScript-based libraries that show tooltips when you hover your mouse over a certain area of a web page. Some are rather plain, some allow the tooltip

Answer 1

Similar to koningdavid's, but works on display:none and block, and adds additional styling.

div.tooltip {
  position: relative;
  /*  DO NOT include below two lines, as they were added so that the text that
        is hovered over is offset from top of page*/
  top: 10em;
  left: 10em;
  /* if want hover over icon instead of text based, uncomment below */
  /*    background-image: url("../images/info_tooltip.svg");
            /!* width and height of svg *!/
            width: 16px;
            height: 16px;*/
}


/* hide tooltip */

div.tooltip span {
  display: none;
}


/* show and style tooltip */

div.tooltip:hover span {
  /* show tooltip */
  display: block;
  /* position relative to container div.tooltip */
  position: absolute;
  bottom: 1em;
  /* prettify */
  padding: 0.5em;
  color: #000000;
  background: #ebf4fb;
  border: 0.1em solid #b7ddf2;
  /* round the corners */
  border-radius: 0.5em;
  /* prevent too wide tooltip */
  max-width: 10em;
}

  hover_over_me
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis purus dui. Sed at orci.