JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" name="" title="Check this box only if you're using a trusted device/computer." />
<br/>
<img src="http://files.softicons.com/download/web-icons/minicons-coloria-icons-by-icojam/png/16x16/blue/019.png" class="tooltip" title="Check this box only if you're using a trusted device/computer." />

CSS

body {
    margin: 80px;
}
.ui-tooltip, .arrow:after {
    background: #fff;
    border: 1px solid rgb(206, 206, 206);
}
.ui-tooltip {
    padding: 8px 15px;
    border-radius: 8px;
    max-width: 150px;
    font: normal 14px/18px Arial, Sans-Serif;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.45);
}
.ui-tooltip-content {
    border: none;
    box-sizing: border-box;
}
.arrow {
    width: 25px;
    height: 25px;
    overflow: hidden;
    position: absolute;
    top: 35%;
    margin-left: 5px;
    bottom: -25px;
    left: -30px;
}
.arrow:after {
    content:"";
    position: absolute;
    left: 20px;
    top: 0px;
    width: 25px;
    height: 25px;
    box-shadow: none;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    tranform: rotate(45deg);
}

JavaScript

(function ($) {
    $('input').tooltip({
        position: {
            my: "left center",
            at: "right+20 center",
            using: function (position, feedback) {
                $(this).css(position);
                $("<div>")
                    .addClass("arrow")
                    .addClass(feedback.vertical)
                    .addClass(feedback.horizontal)
                    .appendTo(this);
            }
        }
    });
})(jQuery);