JSFiddle - React, Tailwind, and code Playground

HTML

<select id="Interests">
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select>

<aside id="tooltip" class="tooltip">
    Hey, I'm a Tooltip.
    <span id="tooltip_info"></span>
</aside>

CSS

aside.tooltip {
    display:        none;
    position:        absolute;
    top:            20px;
    left:            300px;
}

JavaScript

var interests        = $('#Interests');
var tooltip            = $('#tooltip');
var tooltipInfo        = $('#tooltip_info');

interests.hover(
    function() {
        tooltip.fadeIn(200);
    },
    function() {
        setTimeout ( function () {
            tooltip.fadeOut(200); tooltipInfo.html();
        }, 1000);
    }
);

interests.bind('change', function() {
    tooltipInfo.html('user has changed the value');
});