Info Popover

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


Example

Applies to blue and gray only, and blue must be clean-out accessible. This offer includes a drain clean attempt and is not a guarantee. The technician will verify qualification of the drain on site. If the drain does not qualify, the technician will provide a free diagnosis. Price does not include jetting.

HTML

Applies to blue and gray only, and blue must be [extra href="#special" title="DRAIN CLEANOUT" info="popover" info_place="right" info_trigger="hover" info_content="Drain cleanouts provide an entry point into home drainage systems so clogs can be removed or a camera inserted to inspect the system. They're usually located on the large vertical pipes—otherwise known as the main drain—in a basement or crawl space." ]clean-out accessible[/extra]. This offer includes a drain clean attempt and is not a guarantee. The technician will verify qualification of the drain on site. If the drain does not qualify, the technician will provide a free diagnosis. Price does not include [extra href="#special" title="HYDRO JETTING" info="popover" info_place="right" info_trigger="hover" info_content="Jetting is a method used by professional plumbing contractors to clean clogged or slow sewage lines. A blast of water at high pressure is sent into the lines that will usually remove blockages and build up." ]jetting[/extra].

CSS

/* INFO POPOVER
   ================================================== */

.x-extra {
	border-bottom: 1px dashed #BA9753;
	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:#D31145;
	border-bottom:1px solid #ebebeb;
	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 {
	padding:0.563em 0.875em;
	font-size:13px;
	font-weight:400;
	line-height:1.5;
	color:#333;
	background-color:#fff;
}