.tooltip-wrapper { cursor: help; margin: 0 auto; position: relative; text-align: center; -webkit-transform: translateZ(999); -webkit-font-smoothing: antialiased; } .tooltip-wrapper .tooltip-text { background: #2566f4; top: 100%; color: #fff; display: block; left: 0; margin-bottom: 15px; opacity: 0; padding: 20px; pointer-events: none; position: absolute; z-index: 9999; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -ms-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); } .tooltip-wrapper:hover .tooltip-text { opacity: 1; pointer-events: auto; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); z-index: 999; } .lte8 .tooltip-wrapper .tooltip-text { display: none; } .lte8 .tooltip-wrapper:hover .tooltip-text { display: block; }