Info Popover

This is the Info Popover snippet for providing additional information and definitions.

Example

Themeco Pro Web Designer Building Business Websites that are Optimized for Search and Tweaked for Lead-Generation^*

HTML

[extra href="#special" title="THEMECO" info="popover" info_place="right" info_trigger="hover" info_content="While I love the Themeco products and their amazing staff and ownership, I am not affiliated with them beyond being a customer and #1 fan." ]
Themeco[/extra] Pro Web Designer Building Business Websites that are Optimized for Search and Tweaked for Lead-Generation<sup>*</sup>

CSS

/* INFO POPOVER */
.x-extra {
	border-bottom: 1px dashed #666;
	color:#444;
}
.popover-title {
	margin:0;
	padding:0.571em 0.75em;
	font-size:15px;
	font-weight:400;
	line-height:1.3;
	letter-spacing:1px;
	background-color:#112F2E;
	border-bottom:1px solid #112F2E;
	border-radius:5px 5px 0 0;
	color:#fff;
}
.popover-title:before {
	font-family: FontAwesome;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right:2px;
	font-size: 1.1em;
	content: "\f05a";
	color: #fff
}
.popover-content {
        font-family:inherit;
	padding:0.563em 0.875em;
	font-size:.9em;
	font-weight:normal;
	line-height:1.2;
	color:#333;
	background-color:#fff;
}