How to align bootstrap 4 tooltips to the top-left of the elements?

Question

In my bootstrap v4.6.x, I am using tooltip's. By default the tooltip is aligned to the center of the element. Due to the design requirements, I wanted to have the tooltip aligned to the top-left of the element as below:

I have tried below CSS and did not worked:

.tooltip-inner {
    text-align: left!important;
}

Update 1 JSfiddle (https://jsfiddle.net/kingBethal/x0c2sm5u/5/)