Stylus mixin for creation of tooltips with pure CSS tail. Will use the `background-color`, `border-width` and `border-color` properties of the parent element to work out how to define and style the pseudo elements. All you will have to specify is the tail direction and size

tooltip.stylus

tooltip-tail(direction = bottom, color = black, size = 10px)

	if direction is bottom
		dir = 'top'
		top 100%
		left 50%
		margin-left ( - size )
	else if direction is top
		dir = 'bottom'
		bottom 100%
		left 50%
		margin-left ( - size )
	else if direction is left
		dir = 'right'
		right 100%
		top 50%
		margin-top ( - size )
	else if direction is right
		left 100%
		top 50%
		dir = 'left'
		margin-top ( - size )

	border size solid transparent
	border-{dir}-color color

tooltip(direction = bottom, tail-size = 10px)
	color = @background-color or @background
	border-color = @border-color
	border-width = @border-width

	position relative
	display inline-block

	&:after
		content ''
		position absolute
		tooltip-tail(direction, color, tail-size)

	if border-width
		&:before
			content ''
			position absolute
			tooltip-tail(direction, border-color, (tail-size + border-width))

usage-example.styl

tail-size = 5px

.tooltip
    background-color #222
    border-width 1px // Use border-width and border-color separatly or the tail border won't apply
    border-color #111
    borde-style solid
    padding 15px
    border-radius 3px
    color #eee
    tooltip(bottom, tail-size)

    &.tooltip-left
        tooltip(left, tail-size)
        
    &.tooltip-right
        tooltip(left, tail-size)
        
    &.tooltip-top
        tooltip(top, tail-size)

    &.tooltip-bottom
        tooltip(bottom, tail-size)