/* Add this attribute to the element that needs a tooltip */
[data-tip] {
  position: relative;
  z-index: 1000;
  cursor: pointer;
}
[data-tip]:before, [data-tip]:after {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
    [data-tip]:before {
        /* Position tooltip above the element */
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-bottom: 5px;
        margin-left: -80px;
        padding: 7px;
        width: 160px;
        border-radius: 3px;
        background-color: #000;
        background-color: rgba(255, 204, 102, 0.9);
        color: darkorange;
        border-top: 1px solid darkorange;
        font-weight: 600;
        text-align: center;
        font-size: 14px;
        line-height: 1.2;
        content: attr(data-tip);
    }
    [data-tip]:after {
        position: absolute;
        bottom: calc(100% + 1px);
        left: 50%;
        margin-left: -5px;
        width: 0;
        border-top: 5px solid grey;
        border-top: 5px solid rgba(255, 204, 102, 0.9);
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        content: " ";
        font-size: 0;
        line-height: 0;
    }
[data-tip]:hover:before, [data-tip]:hover:after {
  visibility: visible;
  opacity: 1;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}