Stylusで使用できる、after要素で吹き出しツールチップを実現するfunctionです

_example.styl

@import 'fukidashi'

.item1
  fukidashi white 5px of 60px on left
  // 親要素の左側、上から30px位置を中心とする「底辺10px、高さ5px」の白い三角形をつけます

.item2
  fukidashi red 12px of auto on right
  // 親要素の右側、上から50%位置を中心とする「底辺24px、高さ12px」の赤い三角形をつけます

.item3
  fukidashi rgba(0,0,0,.86) 6px of auto on top
  // 親要素の上側、左から50%位置を中心とする「底辺12px、高さ6px」の86%Blackな三角形をつけます

.item4
  fukidashi green 2px of 120px on bottom
  // 親要素の下側、左から60px位置を中心とする「底辺4px、高さ2px」の緑な三角形をつけます

fukidashi.styl

fukidashi(colour, size, of, mastersize, on, direction)
  &:after
    content ' '
    position absolute
    margin-top 0
    margin-left 0
    margin-right 0
    margin-bottom 0
    width 0
    height 0
    border size solid transparent
    if direction is 'top'
      if mastersize is 'auto'
        left 50%
        margin-left (-1*size)px
      else
        left 0
        margin-left (mastersize/2 - size)px
      top 0
      margin-top (-1*size*2)px
      border-bottom-color colour
    if direction is 'left'
      if mastersize is 'auto'
        top 50%
        margin-top (-1*size)px
      else
        top 0
        margin-top (mastersize/2 - size)px
      left 0
      margin-left (-1*size*2)px
      border-right-color colour
    if direction is 'right'
      if mastersize is 'auto'
        top 50%
        margin-top (-1*size)px
      else
        top 0
        margin-top (mastersize/2 - size)px
      right 0
      margin-right (-1*size*2)px
      border-left-color colour
    if direction is 'bottom'
      if mastersize is 'auto'
        left 50%
        margin-left (-1*size)px
      else
        left 0
        margin-left (mastersize/2 - size)px
      bottom 0
      margin-bottom (-1*size*2)px
      border-top-color colour