tooltip.styl

/* Add this attribute to the element that needs a tooltip */
[data-tool]
	position relative
	z-index 2
	cursor pointer

/* Hide the tooltip content by default */
[data-tool]:before,
[data-tool]:after 
	opacity 0
	display none
	pointer-events none


/* Position tooltip above the element */
[data-tool]:before 
	position absolute
	top 100%
	left 50%
	margin-left -80px
	padding 7px
	width 160px
	border-radius 4px
	background-color hsla(0, 0%, 20%, 0.9)
	color #fff
	content attr(data-tool)
	text-align center
	font-size 14px
	line-height 1.2
	margin-top 12px
	text-transform none


/* Triangle hack to make tooltip look like a speech bubble */
[data-tool]:after 
	position absolute
	top 100%
	left 50%
	margin-left -5px
	width 0
	border 6px solid transparent
	border-top-color transparent
	border-bottom-color hsla(0, 0%, 20%, 0.9)
	content " "
	font-size 0
	line-height 0


/* Show tooltip content on hover */
[data-tool]:hover:before,
[data-tool]:hover:after 
	display block
	opacity 1
	animation 0.9s appear-down-2 cubic-bezier(0, 1, 0, 1)

<a data-tool="A link to somewhere!" href="/">click here</a>