.direction-left{
        right:                                      0;
        margin-right:                               0px;
    }
    .direction-right{
        left:                                       0;
        margin-left:                                0px;
    }
    .direction-up{
        bottom:                                     0;
        margin-bottom:                              40px;
    }
    .direction-down{
        top:                                        0;
        margin-top:                                 40px;
    }
    div:hover > div[role='contextual-help']:not([data-helper-text='']){
        display:                                    inline;
    }
    div > div[role='contextual-help']{
        display:                                    none;
    }
    .contextual-help{
        --contextual-help-surface-color:           hsl( var(--hoof-contextual-help-color-h), var(--hoof-contextual-help-color-s), var(--hoof-contextual-help-color-l));
        --contextual-help-border-color:            hsl( var(--hoof-contextual-help-color-h), 100%, 50% );
        
    
        position:                                   absolute;
        text-align:                                 center;
        z-index:                                    1;
        background-color:                           var( --contextual-help-surface-color );
        border:                                     1px solid var( --contextual-help-border-color );
        border-radius:                              8px;
        color:                                      var( --hoof-on-color-2 );
        font-weight:                                normal;
        font-size:                                  0.75rem;     
        padding-top:                                0.2rem;
        padding-bottom:                             0.2rem;

        
        width:                                      150px;
        
    }