[data-tooltip] {
  border-bottom: 1px dashed #aaa;
  margin-bottom: -1px;
  cursor: help;
}

[data-tooltip]:before {
    content: attr(data-tooltip);
    opacity: 0;
    z-index: -1;
    position: absolute;
    font-size: 0.8em;
    padding: 0.1em 0.3em;
    max-width: 400px;
    border: 1px solid #888;
    background: white;
    margin-top: 1.5em;
    white-space: pre;
    text-align: left;
    border-radius: 5px;
    cursor: default !important;
    box-shadow: 1px 1px 4px #888;
    transition: opacity 0.3s ease-out;
}

[data-tooltip].normalspacing:before {
    white-space: normal !important;
}

[data-tooltip]:hover:before {
    opacity: 1;
    z-index: 2;
    transition: opacity 0.4s 0.3s ease-in;
}