JSFiddle - React, Tailwind, and code Playground

by A B

HTML

<div id="ExpectedDeliveriesBody">
    <input type="text" value="ffffffffrfff" class="TimeOfDelivery InputElement" maxlength="100">

    <input type="text" value="ffffffffrfff" class="TimeOfDelivery InputElement" maxlength="100">
</div>

CSS

.tool_tip
{
    border: 1px solid #444;
    font-size: 14px;
    max-width: 205px;
    padding: 4px;
    position: absolute;
    z-index: 2000;
    text-shadow: none;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    background-color: #FFFF99;
}

JavaScript

$("#ExpectedDeliveriesBody").on("mouseover", ".InputElement", function (event) {
            var title = $(this).val();
            if (title) {
                var tooltip = $('<div id="myTooltip" class="tool_tip" />');
                tooltip.hide()
                        .appendTo('body')
                        .html(title)
                        .stop()
                        .show('fast');

                $("body").append(tooltip);

                $("#myTooltip").position({
                    of: $(this),
                    my: "left top",
                    at: "left bottom",
                    // offset: $("#offset").val(),
                    //using: using,
                    collision: "flipfit flipfit "
                });
            }
});

$("#ExpectedDeliveriesBody").on("mouseover", ".InputElement", function (event) {

});

function hide() {
    timeout = setTimeout(function () {
        $("#myTooltip").hide('fast');
    }, 500);
};