.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltip_red {
    visibility: hidden;
    width: 300px;
    background-color: red;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}
.tooltip:hover .tooltip_red {
    visibility: visible;
}

.tooltip .tooltip_green {
    visibility: hidden;
    width: 300px;
    background-color: green;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}
.tooltip:hover .tooltip_green {
    visibility: visible;
}

.tooltip .tooltip_blue {
    visibility: hidden;
    width: 300px;
    background-color: blue;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}
.tooltip:hover .tooltip_blue {
    visibility: visible;
}

.tooltip .tooltip_orange {
    visibility: hidden;
    width: 300px;
    background-color: orange;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}
.tooltip:hover .tooltip_orange {
    visibility: visible;
}

.tooltip .tooltip_purple {
    visibility: hidden;
    width: 300px;
    background-color: purple;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}
.tooltip:hover .tooltip_purple {
    visibility: visible;
}

.tooltip .tooltip {
    visibility: hidden;
    width: 300px;
    background-image: -webkit-linear-gradient(top, #090909, #b9c0c5); /* For Chrome and Safari */
    background-image:    -moz-linear-gradient(top, #090909, #b9c0c5); /* For old Fx (3.6 to 15) */
    background-image:     -ms-linear-gradient(top, #090909, #b9c0c5); /* For pre-releases of IE 10*/
    background-image:      -o-linear-gradient(top, #090909, #b9c0c5); /* For old Opera (11.1 to 12.0) */
    background-image:         linear-gradient(to bottom, #090909, #b9c0c5); /* Standard syntax; must be last */
    color: #fff;
    text-align: center;
    border-radius: 30px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    z-index: 2;
    top: 100%;
    left: 50%;
    margin-left: -20px;
    box-shadow: 10px 10px 5px grey;
}
.tooltip:hover .tooltip {
    visibility: visible;
}

.tooltip2 {
    position: relative;
    display: inline-block;
}
.tooltip2 .tooltip2 {
    visibility: hidden;
    width: 300px;
    background-image: -webkit-linear-gradient(top, #b9c0c5, #b9c0c5); /* For Chrome and Safari */
    background-image:    -moz-linear-gradient(top, #b9c0c5, #b9c0c5); /* For old Fx (3.6 to 15) */
    background-image:     -ms-linear-gradient(top, #b9c0c5, #b9c0c5); /* For pre-releases of IE 10*/
    background-image:      -o-linear-gradient(top, #b9c0c5, #b9c0c5); /* For old Opera (11.1 to 12.0) */
    background-image:         linear-gradient(to bottom, #b9c0c5, #b9c0c5); /* Standard syntax; must be last */
    color: #fff;
    text-align: center;
    border-radius: 30px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    z-index: 2;
    top: 100%;
    left: 50%;
    margin-left: -20px;
    box-shadow: 10px 10px 5px grey;
}
.tooltip2:hover .tooltip2 {
    visibility: visible;
}