JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="block">
    <div data-tooltip="tooltip" title="data-tooltip 1 = tooltip tl " class="btn btn1">tooltip 1</div>
    <div data-tooltip="tooltip" title="data-tooltip 2 = tooltip tc" class="btn btn2">tooltip 2</div>
    <div data-tooltip="tooltip" title="data-tooltip 3 = tooltip tr" class="btn btn3">tooltip 3</div>
    <div data-tooltip="tooltip" title="data-tooltip 4 = tooltip rc" class="btn btn4">tooltip 4</div>
    <div data-tooltip="tooltip" title="data-tooltip 5 = tooltip br" class="btn btn5">tooltip 5</div>
    <div data-tooltip="tooltip" title="data-tooltip 6 = tooltip bc" class="btn btn6">tooltip 6</div>
    <div data-tooltip="tooltip" title="data-tooltip 7 = tooltip bl" class="btn btn7">tooltip 7</div>
    <div data-tooltip="tooltip" title="data-tooltip 8 = tooltip lc" class="btn btn8">tooltip 8</div>
</div>

CSS

html, body, div {
    margin: 0;
    padding: 0;
}
.block {
    position: absolute;
    height: 100%;
    width: 100%;
}
.btn {
    background: #cccccc;
    padding: 5px 5px;
    position: absolute;
    text-align: center;
    height: 18px;
    width: 100px;
}
.btn:hover {
}
.btn1 {
    left: 5px;
    top: 5px;
}
.btn2 {
    left: 50%;
    margin-left: -50px;
    top: 5px;
}
.btn3 {
    top: 5px;
    right: 5px;
}
.btn4 {
    margin-top: -14px;
    right: 5px;
    top: 50%;
}
.btn5 {
    bottom: 5px;
    right:5px;
}
.btn6 {
    bottom: 5px;
    left: 50%;
    margin-left: -50px;
}
.btn7 {
    bottom: 5px;
    left: 5px;
}
.btn8 {
    margin-top: -14px;
    left: 5px;
    top: 50%;
}
.tooltip_form {
    color:#ffffff;
    display:block;
    padding:10px;
    position: absolute;
    visibility:visible;
    max-width:250px;
    z-index: 30000;
}
.tooltip {
    background:#FF8B81;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    -webkit-box-shadow:0 2px 1px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow:0 2px 1px 0 rgba(0, 0, 0, 0.5);
    box-shadow:0 2px 1px 0 rgba(0, 0, 0, 0.5);
    display:block;
    font-family:kelson_sans_ruregular, Arial, Helvetica, sans-serif;
    font-size:13px;
    line-height:16px;
    padding:4px 8px;
    text-align:center;
    text-decoration:none;
    position: relative;
    white-space:nowrap;
}
.tooltip_ar {
    border-color:transparent;
    border-style:solid;
    position:absolute;
    height:0;
    width:0;
}
.tooltip_bottom {
    border-width:10px 10px 0;
    border-top-color:#FF8B81;
    bottom:0px;
}
.tooltip_top {
    border-width:0 10px 10px;
    border-bottom-color:#FF8B81;
    top:0px;
}

JavaScript

/*
 *
 *
 Tooltip */
$( document ).on( 'mouseenter', '[data-tooltip]', function () {
    var a = $( this ).data( 'tooltip' ),
        b = $( this ).outerHeight(),
        c = $( this ).outerWidth(),
        d = $( this ).offset(),
        e = $( window ).width(),
        f = $( this ).attr( 'title' ),
        g = '',
        h = '',
        i = 'data-tooltip_form="form"',
        j = '.tooltip_ar',
        k = 'tooltip_top',
        l = 'tooltip_bottom',
		m = '',
		n = '',
		o = '';

    $( '[' + i + ']' ).remove();

    if ( f != '' ) {
        $( this ).removeAttr( 'title' ).attr( 'data-tooltip-title', f );
        $( 'body' ).append( '<div class="tooltip_form" style="display: none;" ' + i + '>\
                            <div class="tooltip ' + a + '_text">\
                                ' + f + '\
                            </div>\
                            <div class="tooltip_ar"></div>\
                          </div>' );

        m = $( '[' + i + ']' ).outerHeight();
        n = $( '[' + i + ']' ).outerWidth();
        o = $( '[' + i + '] ' + j ).outerWidth();

        if ( d.top < m ) {
            g = d.top + b;
            $( '[' + i + '] ' + j ).addClass( k );

        } else {
            g = d.top - m;
            $( '[' + i + '] ' + j ).addClass( l );

        }

        var h = d.left - ( n / 2 ) + ( c / 2 );
        if ( h + n >= e ) {
            h = e - n;

            o = c / 2 - o;
            $( '[' + i + '] ' + j ).css({
                'right' : o + 'px'
            });

        } else if ( h < 0 ) {
            h = 0;

            o = c / 2 - o;
            $( '[' + i + '] ' + j ).css({
                'left' : o + 'px'
            });

        } else {

            o = n / 2 - o;
            $( '[' + i + '] ' + j ).css({
                'left' : o + 'px'
            });

        }

        $( '[' + i + ']' ).css({
            'top'		: g + 'px',
            'left'		: h + 'px',
            'display'	: 'block'
        });

   ...