.tooltipSysTemp, .tooltipUserTemp, .tooltipQuesMark {
            position: relative;
            display: inline-block;            
        }

            .tooltipSysTemp .tooltiptextSysTemp, .tooltipQuesMark .tooltiptextQuesMark  {
                visibility: hidden;
                width: 300px;
                background-color: #555;
                color: #fff;
                text-align: left;
                border-radius: 6px;
                padding: 5px 5px;
                position: absolute;
                z-index: 1;
                bottom: 125%;
                left: 50%;
                margin-left: -60px;
                opacity: 0;
                transition: opacity 1s;
            }

                .tooltipSysTemp .tooltiptextSysTemp::after, .tooltipUserTemp .tooltiptextUserTemp::after, .tooltipQuesMark .tooltiptextQuesMark::after {
                    content: "";
                    position: absolute;
                    top: 100%;
                    left: 50%;
                    margin-left: -5px;
                    border-width: 5px;
                    border-style: solid;
                    border-color: #555 transparent transparent transparent;
                }

            .tooltipSysTemp:hover .tooltiptextSysTemp, .tooltipUserTemp:hover .tooltiptextUserTemp, .tooltipQuesMark:hover .tooltiptextQuesMark {
                visibility: visible;
                opacity: 1;
            }
        

            .tooltipUserTemp .tooltiptextUserTemp {
                visibility: hidden;
                width: 240px;
                background-color: #555;
                color: #fff;
                text-align: center;
                border-radius: 6px;
                padding: 5px 0;
                position: absolute;
                z-index: 1;
                bottom: 125%;
                left: 50%;
                margin-left: -60px;
                opacity: 0;
                transition: opacity 1s;
            }