JSFiddle - React, Tailwind, and code Playground

HTML

<a id="link" href="#">Link</a>
<div id="tip">
    <p>some dummy tip text</p>
</div>
<select id="select">
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<input type="text" id="text" />

CSS

#tip {
    height: 200px;
    width: 200px;
    background: #fafafa;
    z-index: 10;
    position: absolute;
    top: 30px;
    left: 10px;
    display: none;
}

#select {
    position: absolute;
    top: 30px;
    left: 10px;
    z-index: 1;
}
#link {
    position: absolute;
    top: 10px;
    left: 10px;
}
#text {
    position: absolute;
    top: 30px;
    left: 210px;
}

JavaScript

$('#link').on('mouseenter',function(e){
    if ($('#select:focus').length > 0) {
        $('#select').blur();
        $('#select').hide();
    }
    $('#tip').show();
});
$('#link').on('mouseleave',function(e){
    $('#tip').hide();
    $('#select').show();
});
$('#select').on('change',function(e){
    $('#text').val($(this).val());
});