Large Tooltip Sample

I have a tooltip.
I am a tooltip!

.wrapper{text-transform:uppercase;background:#ececec;color:#555;cursor:help;font-family:"Gill Sans",Impact,sans-serif;font-size:20px;margin:100px 75px 10px 75px;padding:15px 20px;position:relative;text-align:center;width:200px;-webkit-transform:translateZ(0);-webkit-font-smoothing:antialiased}.wrapper .tooltip{background:#1496bb;bottom:100%;color:#fff;display:block;left:-20px;margin-bottom:15px;opacity:0;padding:20px;pointer-events:none;position:absolute;width:100%;-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,.28);-moz-box-shadow:2px 2px 6px rgba(0,0,0,.28);-ms-box-shadow:2px 2px 6px rgba(0,0,0,.28);-o-box-shadow:2px 2px 6px rgba(0,0,0,.28);box-shadow:2px 2px 6px rgba(0,0,0,.28)}.wrapper .tooltip:before{bottom:-20px;content:" ";display:block;height:20px;left:0;position:absolute;width:100%}.wrapper .tooltip:after{border-left:solid transparent 10px;border-right:solid transparent 10px;border-top:solid #1496bb 10px;bottom:-10px;content:" ";height:0;left:50%;margin-left:-13px;position:absolute;width:0}.wrapper:hover .tooltip{opacity:1;pointer-events:auto;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}.lte8 .wrapper .tooltip{display:none}.lte8 .wrapper:hover .tooltip{display:block}