/* DISABLE PRODUCT TOOL TIP HOVER BY DISPLAY: NONE !IMPORTANT; */
.tooltip {
	display: inline-block;
	position: relative;
	border-bottom: 0px;
	border-radius: 0px;
	-webkit-appearance: none;
	-webkit-border-radius: 0px;
	padding-bottom: 150px;
	margin-bottom: -150px !important;
}

.tooltip .top {
	width: 100%;
	height: 368px;
	top: 0px;
	color: #eee;
	background-color: #555;
	font-weight: normal;
	border-radius: 0px;
	-webkit-appearance: none;
	-webkit-border-radius: 0px;
	position: absolute;
	z-index: 99999999;
	box-sizing: border-box;
	border: 1px solid #e81123;
	box-shadow: none;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s;
	padding: calc(.25em + .25vw);
}

.tooltip:hover .top {
    visibility:visible; opacity:1;
}

.tooltip .top i {
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

/* DIV EXAMPLE */
/* http://www.menucool.com/tooltip/css-tooltip
 * 
 * <div class="btn btn-primary tooltip">Hover Me to Preview
    <div class="top">
        <h3>Lorem Ipsum</h3>
        <p>Dolor sit amet, consectetur adipiscing elit.</p>
        <i></i>
    </div>
</div>