/*.tooltip {
  position: relative;
  display: inline-block;
  margin:10rem;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  min-width: 350px;
  background-color: #292929;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: .5rem;
  position: absolute;
  z-index: 1;
  bottom: 250%;
  left: 50%;
  margin-left: -60px;
  font-family:sans-serif;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #292929 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}*/


[data-tip] {
    position: relative;
}

    [data-tip]:before {
        content: '';
        /* hides the tooltip when not hovered */
        display: none;
        content: '';
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #1a1a1a;
        position: absolute;
        top: 30px;
        left: 35px;
        z-index: 8;
        font-size: 0;
        line-height: 0;
        width: 0;
        height: 0;
    }

    [data-tip]:after {
        display: none;
        content: attr(data-tip);
        position: absolute;
        top: 35px;
        left: 0px;
        padding: 5px 8px;
        background: #1a1a1a;
        color: #fff;
        z-index: 9;
        font-size: 0.7em;
        height: 30px;
        line-height: 10px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        white-space: nowrap;
        word-wrap: normal;
    }

    [data-tip]:hover:before,
    [data-tip]:hover:after {
        display: block;
    }