stylus mix-in for widgets

widget.styl

// require: npm install nib
@import 'nib/vendor'

support-for-ie = false  // disable old browser support

topstand-triangle()
  width: 0
  height: 0
  border-top: 25px solid bg-color
  border-left: 20px solid transparent
  border-right: 20px solid transparent

tooltip(bg-color, fg-color)
  display: inline
  position: relative
  text-decoration: none

  &:after
    content: attr(data-tooltip)
    position: absolute
    bottom: 135%
    right: 20%

    white-space: normal
    background: bg-color
    color: fg-color
    padding: 5px 15px
    border-radius 3px

    opacity: 0
    transition-property opacity, bottom
    transition-timing-function ease
    transition-duration 0.6s

  &:hover:after
    opacity: 1
    bottom: 120%

  &:before
    topstand-triangle()
    content: ""
    position: absolute

    opacity: 0
    right: 30%
    bottom: 90%
    transition-property opacity, bottom
    transition-timing-function ease-in
    transition-duration 0.2s

  &:hover:before
    opacity: 1
    bottom: 75%

// sample
.tooltip
  tooltip(#f13d63, #FEFEFE)