i-rubik/src/style/components/tooltip.styl

A Vue.js 2.0+ UI Components Framework

[data-tooltip]
  position relative
  
  &:hover
    &:after
      padding .4rem
      opacity 1
      visibility visible
  
  &:after
    position absolute
    padding 0
    width auto
    content attr(data-tooltip)
    border-radius .2rem
    line-height 1.2rem
    font-size .8rem
    pointer-events none
    // transition $primary-transition
    transition $secondary-transition
    color #fff
    visibility hidden
    opacity 0
    white-space pre
    z-index 99
    background: $grey.darken-4
    @extend .z-depth-1
    
  &[data-tooltip-position='bottom']
    &:after
      top 100%
      left 50%
      transform translateX(-50%) translateY(-10px)
      
    &:hover
      &:after
        transform: translateX(-50%) translateY(10px)
      
  &[data-tooltip-position='top']
    &:after
      bottom 100%
      left 50%
      transform translateX(-50%) translateY(10px)
      
    &:hover
      &:after
        transform translateX(-50%) translateY(-10px)

  &[data-tooltip-position='left']
    &:after
      bottom 50%
      right 100%
      transform: translateX(10px) translateY(50%)
      
    &:hover
      &:after
        transform translateX(-10px) translateY(50%)
      
  &[data-tooltip-position='right']
    &:after
      bottom 50%
      left 100%
      transform translateX(-10px) translateY(50%)
      
    &:hover
      &:after
        transform translateX(10px) translateY(50%)