JSFiddle - React, Tailwind, and code Playground

by bmh_ca

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/flick/jquery-ui.css">
<script src="http://craigsworks.com/projects/qtip_new/packages/latest/jquery.qtip.pack.js"></script>
<link rel="stylesheet" href="https://github.com/Craga89/qTip/raw/master/dist/jquery.qtip.css">
<div id="A">
    Over me.
</div>

<div id="B">
        <input id="X">
</div>

CSS

/* autocomplete trapped in overflow:hidden of qTip */

/* Uncomment for solution: /
.ui-tooltip .ui-tooltip-content, .ui-tooltip .ui-tooltip-wrapper {
    overflow: visible;
}
/* */

#A {
    height: 40px;
    background-color: #400; 
}
#B {
    background-color: #800;
    display: none;
    padding: 12px;
}

JavaScript

$("#A").qtip({
    content: {
        text: $("#B")
    },
    hide: {
        event: 'mouseout',
        fixed: true,
        delay: 2050
    },
    position: {
        my: "top left",
        at: "bottom left"
    }
    

});

$("#X").autocomplete({
    source: ["abc", "abc-2", "abc-3"],
    appendTo: $("#B")
});