JSFiddle - React, Tailwind, and code Playground

by ZeNz0r

HTML

<div id="body">
    <input type="text" hastooltip="top" />
    <div istooltip class="tooltip">I'm a tooltip</div>
</div>
<div tooltipwrap="top" id="target"></div>

CSS

#body {
    float:left;
    height:200px;
    width:200px;
    background:blue;
}
#target {
    float:right;
    height:100px;
    width:100px;
    background:#ccc;
}
.tooltip {
    width:50px;
    height:50px;
    background:#fff;
    display:none;
}

JavaScript

/*$('[hastooltip]').focus(function () {
    var position = $(this).attr('hastooltip'),
        container = $('[tooltipwrap]').attr('tooltipwrap', position),
        mytooltip = $(this).next('[istooltip]');
    container.append(mytooltip.remove().show());
})
    .blur(function () {
    var position = $(this).attr('hastooltip'),
        container = $('[tooltipwrap]').attr('tooltipwrap', position),
        mytooltip = container.children('[istooltip]');
    $(this).after(mytooltip.remove().hide());
});*/


$('[hastooltip]').bind({
    var position = $(this).attr('hastooltip'),
        container = $('[tooltipwrap=' + position + ']'),
        mytooltip = $(this).next('[istooltip]'),
        mytooltipMoved = container.children('[istooltip]');
    focus: function (container, mytooltip) {
        container.append(mytooltip.clone().fadeIn(1500));
    },
    blur: function (container, mytooltipMoved) {
        $(this).after(mytooltipMoved.remove().hide());
    }
});