body { 
				background: #32373D; 
				text-align:center; 
			}
			
			span {
				position: relative;
				cursor: default;
				font: normal normal 85% sans-serif;
				color: white;
				text-shadow: #090A0B 0 -1px;
				display: inline-block;
				margin: 300px 0;
			}
			
			span > i {
				text-align: center;
				font: italic normal 90% Georgia, serif;
				line-height: 150%;
				color: black;
				text-shadow: white 0 1px;
                background: -webkit-linear-gradient(#DDD, #CCC);
                background:    -moz-linear-gradient(#DDD, #CCC);
                background:     -ms-linear-gradient(#DDD, #CCC);
                background:      -o-linear-gradient(#DDD, #CCC);
                background:         linear-gradient(#DDD, #CCC);
                background-clip: padding-box;
				box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
				border: 5px solid #111;
				border: 5px solid rgba(0, 0, 0, 0.5);
				border-radius: 3px;
				position: absolute;
				width: 250px;
				left: 50%;
				margin-left: -125px;
				padding: 10px 0;
				bottom: 100%;
				margin-bottom: 15px;
				visibility:hidden;
				opacity:0;
				-webkit-transition: opacity 0.5s linear;
				   -moz-transition: opacity 0.5s linear;
				    -ms-transition: opacity 0.5s linear;
				     -o-transition: opacity 0.5s linear;
				transition: opacity 0.5s linear;
			}
			
			span > i:before, 
            span > i:after {
				content: "";
				position: absolute;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				top: 100%;
				left: 50%;
				margin-left: -10px;
			}
			
			span > i:before {
				border-top: 10px solid #111;
				border-top: 10px solid rgba(0, 0, 0, 0.5);
				margin-top: 5px;
			}
			
			span > i:after{
				border-top: 10px solid #CCC;
				margin-top: -2px;
				z-index: 1;
			}
			
			span:hover > i {
				visibility: visible;
				opacity: 1;
			}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground