#tooltip {
     text-align: center;
     color: #fff;
     background: #000;
     background: rgba(0, 0, 0, 0.8);
     position: absolute;
     padding: 15px;
     border-radius: 5px;
     box-sizing: border-box;
     z-index: 10000001;
 }

 #tooltip:before {
     position: absolute;
     color: #fff;
     right: 8px;
     top: 3px;
     font-size: 12px;
 }

 #tooltip:after

 /* triangle decoration */
     {
     width: 0;
     height: 0;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-top: 10px solid rgba(0, 0, 0, 0.8);
     content: '';
     position: absolute;
     left: 50%;
     bottom: -10px;
     margin-left: -10px;
 }

 #tooltip.top:after {
     border-top-color: transparent;
     border-bottom: 10px solid #111;
     top: -20px;
     bottom: auto;
 }


 #tooltip.left:after {
     left: 10px;
     margin: 0;
 }

 #tooltip.right:after {
     right: 10px;
     left: auto;
     margin: 0;
 }

 .source {
     position: absolute;
     bottom: 10px;
     right: 10px;
     font-size: 10px;
     color: white;
 }