A Pen by Joe Watkins.

A-Pen-by-Joe-Watkins.markdown

A Pen by Joe Watkins

A Pen by Joe Watkins on CodePen.

License.

index.html

<a href="#0" data-tip="We will not share your information with anyone., but if you'd like to opt out of our email list,you can easily do so by following the instructions in any email you receive" class="big-message tip-above"><i class="icon-question-sign"></i></a>

style.css

body {
  margin:150px;
  font-family:arial;
}

a  {
  outline:0px;
  border:0px;
  text-decoration:none;
}

[data-tip] {
	position:relative;
	cursor:help;
}
[data-tip]:before {
	content:'';
	/* hides the tooltip when not hovered */
	display:none;
	border:5px solid #1a1a1a;
	/* 4 border technique to create the arrow */
	border-top-color:#1a1a1a;
	border-right-color:transparent;
	border-bottom-color:transparent;
	border-left-color:transparent;
	position:absolute;
	top:-7px;
	left:3px;
	z-index:8;
	font-size:0;
	line-height:0;
	width:0;
	height:0;
}
[data-tip]:after {
	display:none;
	content:attr(data-tip);
	position:absolute;
	top:-35px;
	left:-0px;
	padding:5px 8px;
	background:#1a1a1a;
	color:#fff;
	z-index:9;
	font-size: 0.65em;
	height:18px;
	line-height:18px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	white-space:nowrap;
	word-wrap:normal;
}
[data-tip]:hover:before,
[data-tip]:hover:after {
	display:block;
}

.big-message[data-tip]:after {
  content: attr(data-tip);
	position: absolute;
	top: -92px;
	left: -92px;
  text-align:center;
	height: 76px;
  white-space:normal;
	width: 210px;
}

.tip-below[data-tip]:after {
	top:23px;
	left:0px;
}
.tip-below[data-tip]:before {
	border-top-color:transparent;
	border-right-color:transparent;
	border-bottom-color:#1a1a1a;
	border-left-color:transparent;
	top:13px;
	left:10px;	
}