.tooltripWrapper{
    display: none;
    position: absolute;
    padding: 2px 4px 2px 4px;
    z-index: 9000;
    top: 100px;
    left: 100px;
    min-width: 5vw;
    max-width: 300px;
    background-color: #3c3c3c;
    color: white;
    border-radius: 4px;
}
.tooltripWrapper *{
    pointer-events: none;
}
.left-bottomTool:before{
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #3c3c3c;
    bottom: -8px;
    left: 8px;
}
.right-bottomTool:before{
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #3c3c3c;
    bottom: -8px;
    right: 8px;
}
.left-topTool:before{
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #3c3c3c;
    top: -8px;
    left: 8px;
}
.right-topTool:before{
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #3c3c3c;
    top: -8px;
    right: 8px;
}
.tooltripContainer{
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: "Roboto", arial, sans-serif;
    font-size: 11px;
    font-weight: lighter;
}
.tooltripHeader, .tooltripFooter{
    padding: 1px 5px;
    font-weight: normal;
    color: #a0a0a0;
}
.tooltripContent{
    padding: 2px;
}
*[datatooltrip=tooltrip] *{
    pointer-events: none;
}