.ocTooltips
    position relative
    &[html]
        overflow visible
    &:before, &:after
        pointer-events none
        transition all 0.18s ease-out 0.18s
        top -100%
        left 50%
        position absolute
        z-index 10
        transform translate(10px,-50%)
        transform-origin top
        font-size 12px
        margin-top 5px
        opacity 0
    &:after
        background #1d1d2d
        border-radius 3px
        color #fff
        content attr(html)
        padding .4em 1em
        white-space normal
        word-break break-word
        margin-bottom 11px
        line-height 1.41em
        transform translate(-50%, -100%)
        width max-content
        max-width 300px

    &:before
        content ""
        margin-bottom 5px
        border-width 6px
        border-style solid
        border-color transparent
        border-top-color #1d1d2d
        transform translate(-50%, 0)
        max-width attr(data-width)

    &[direct="right"]
        &:before, &:after
            left 100%
            top 50%
            transform translate(10px, -50%)
            margin-top 0
        &:before
            transform translate(-1px, -50%)
            border-top-color transparent
            border-right-color #1d1d2d
    &[direct="left"]
        &:before, &:after
            left 0
            top 50%
            transform translate(-100%, -50%)
            margin-top 0
            margin-left -8px
        &:before
            transform translate(-1px, -50%)
            border-top-color transparent
            border-left-color #1d1d2d
    &[direct="bottom"]
        &:before, &:after
            left 50%
            top 100%
            transform translate(-50%, 5px)
            margin-top 0
        &:before
            transform translate(-50%, -50%)
            border-top-color transparent
            border-bottom-color #1d1d2d
    
    &[reverse]
        &:after
            color #666
            background #fff
            border 1px solid #ddd
            box-shadow 0 2px 4px rgba(0,0,0,.12), 0 0 6px rgba(0,0,0,.04)
        &[direct="bottom"]
            &:before            
                border-top-color transparent
                border-bottom-color #fff
        &[direct="left"]
            &:before            
                border-top-color transparent
                border-left-color #fff
        &[direct="right"]
            &:before            
                border-top-color transparent
                border-right-color #fff 
    &:hover
        &:before, &:after
            opacity 0.9