I have a resizable li element in an ol in a div. The resizable is working and the element can be resized. I'm using the elements height to provide feedback on what the height will be when the item is released (16px is 15minutes). However the elements title is not adjusted and so no feedback is provided.

My html:

<div class="day">
    <ol id="t2022-02-26" style="height: 100%;width: 100%;" class="jobs job-todo" data-date="2022-02-21">
        <li class="task" style="height: 256px; width: 225px;" title="4h00m" data-task="14">
            <span class="task-head">Example1</span>
            <div class="description">
                <p>This is resizable</p>
            </div>
        </li>
    </ol>
</div>

and the associated javascript:

$( function() {
    $(".task").resizable(
        {
            // containment: "parent",
            distance: 8,
            ghost: true,
            handles: "n",
            grid: 16,
            resize: function( event, ui ) {
                var h = ui.helper.css( "height" );
                h = h.slice( 0, -2 ); // remove the px
                var height = h / 64 ; // as a decimal
                var hours = Math.trunc( height );
                var mins = (height % hours) * 60;
                var result = hours + "h" + mins + "m";
                console.debug( "(" + height + "hours.) hours: " + hours + ", mins: " + mins );
                ui.helper.title = result;
            }
        }
    );

With this code the change is echoed into the debug colsole but the title of the element is unchanged and the tooltip is thus unchanged!

thanks