Only CSS hover over with html content ( Tool-tip )

We have lot of ways to handle hover over popups or too-tips. This is one of easiest way I feel as it has only CSS to show the pop up.

Advantage here is we can add html content inside the popup.

Please find code snippet as follows:


Markup Snippet:

	<a href="#" class="hoverOverCSS" >
	Hover On Me!!!
	<span>
	<b></b> <!--IMP -->
	<div> <!--IMP -->
	<!-- html/VF body -->
	<p>
	This is sampple hover over - You can add more html/VF content here
	</p>
	</div>
	</span>
	</a>

view raw Hover Over HTML.html hosted with ❤ by GitHub

IF you observe in the above snippet it uses a hierarchy of anchor and span tags to show the magic popup.

Make sure you will not change the hierarchy.


Style Snippet:

	.hoverOverCSS {
	outline: none;
	position: relative;
	}
	.hoverOverCSS strong {
	line-height: 30px;
	}
	.hoverOverCSS > span {
	width: 400px;
	padding: 10px 20px;
	margin-top: 0;
	margin-left: -120px;
	opacity: 0;
	visibility: hidden;
	z-index: 10;
	position: absolute;
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	border-radius: 3px;
	box-shadow: 2px 2px 2px #999;
	-webkit-transition-property: opacity, margin-top, visibility, margin-left;
	-webkit-transition-duration: 0.4s, 0.3s, 0.4s, 0.3s;
	-webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
	transition-property: opacity, margin-top, visibility, margin-left;
	transition-duration: 0.4s, 0.3s, 0.4s, 0.3s;
	transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
	}
	/*.hoverOverCSS > span:hover,*/
	.hoverOverCSS:hover > span {
	opacity: 1;
	text-decoration: none;
	visibility: visible;
	overflow: visible;
	margin-top: 50px;
	display: inline;
	margin-left: -90px;
	}
	.hoverOverCSS span b {
	width: 15px;
	height: 15px;
	margin-left: 40px;
	margin-top: -19px;
	display: block;
	position: absolute;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-box-shadow: inset -1px 1px 0 #fff;
	-moz-box-shadow: inset 0 1px 0 #fff;
	-o-box-shadow: inset 0 1px 0 #fff;
	box-shadow: inset 0 1px 0 #fff;
	display: none\0/;
	*display: none;
	}
	.hoverOverCSS > span {
	color: #000000;
	background: #FBF5E6;
	background: -webkit-linear-gradient(top, #FBF5E6, #FFFFFF);
	background: linear-gradient(top, #FBF5E6, #FFFFFF);
	border: 1px solid #CFB57C;
	}
	.hoverOverCSS span b {
	background: #FBF5E6;
	border-top: 1px solid #CFB57C;
	border-right: 1px solid #CFB57C;
	}

view raw hover over.css hosted with ❤ by GitHub

This style has configured to support IE9+ browsers and other latest ones.


I tries same in VF page and found it is working correctly, a simple version can look like the following snippet:

	<apex:page standardController="Account">
	<style>
	.hoverOverCSS {
	outline: none;
	position: relative;
	}
	.hoverOverCSS strong {
	line-height: 30px;
	}
	.hoverOverCSS > span {
	width: 400px;
	padding: 10px 20px;
	margin-top: 0;
	margin-left: -120px;
	opacity: 0;
	visibility: hidden;
	z-index: 10;
	position: absolute;
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	border-radius: 3px;
	box-shadow: 2px 2px 2px #999;
	-webkit-transition-property: opacity, margin-top, visibility, margin-left;
	-webkit-transition-duration: 0.4s, 0.3s, 0.4s, 0.3s;
	-webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
	transition-property: opacity, margin-top, visibility, margin-left;
	transition-duration: 0.4s, 0.3s, 0.4s, 0.3s;
	transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
	}
	/*.hoverOverCSS > span:hover,*/
	.hoverOverCSS:hover > span {
	opacity: 1;
	text-decoration: none;
	visibility: visible;
	overflow: visible;
	margin-top: 50px;
	display: inline;
	margin-left: -90px;
	}
	.hoverOverCSS span b {
	width: 15px;
	height: 15px;
	margin-left: 40px;
	margin-top: -19px;
	display: block;
	position: absolute;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-box-shadow: inset -1px 1px 0 #fff;
	-moz-box-shadow: inset 0 1px 0 #fff;
	-o-box-shadow: inset 0 1px 0 #fff;
	box-shadow: inset 0 1px 0 #fff;
	display: none\0/;
	*display: none;
	}
	.hoverOverCSS > span {
	color: #000000;
	background: #FBF5E6;
	background: -webkit-linear-gradient(top, #FBF5E6, #FFFFFF);
	background: linear-gradient(top, #FBF5E6, #FFFFFF);
	border: 1px solid #CFB57C;
	}
	.hoverOverCSS span b {
	background: #FBF5E6;
	border-top: 1px solid #CFB57C;
	border-right: 1px solid #CFB57C;
	}
	</style>
	<a href="#" class="hoverOverCSS" >
	Hover On Me!!!
	<span>
	<b></b> <!--IMP -->
	<div> <!--IMP -->
	<!-- html/VF body -->
	<p>
	This is sampple hover over - You can add more html/VF content here
	</p>
	</div>
	</span>
	</a>
	</apex:page>

view raw Hover Over VF Page.htm hosted with ❤ by GitHub

Thanks.