JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div class="article"><br /><br /><br />
<div class="bks-sponsor"><div class="sp-firma1-logo">Firma 1</div><div class="info">This is a small Tooltip with the Classname 'Tooltip1'</div></div><br />
<div class="bks-sponsor"><div class="sp-firma2-logo">Firma 2</div><div class="info">
<p><b>TOPCOLOR</b></p>
<p>Firma oferująca usługi graficzne wysokiej jakości. Klienci mają także możliwość skorzystania z wieloletniego doświadczenia i profesjonalnego doradztwa gwarantującego racjonalizację i optymalizację budżetów marketingowych przeznaczanych na usługi poligraficzne. Darmowa korekta językowa dostarczanych treści publikacji, sprawdzenie poprawności powierzonych do druku materiałów oraz wygodna dostawa dopełniają całości oferty TOPCOLOR.</p>
<p>ul. Fordońska 112a, 85-739 Bydgoszcz</p>
<p>tel./fax 52 362 01 02 tel. 52 362 00 84</p>
<p>www.topcolor.pl</p>    
</div></div><br />
<div class="bks-sponsor"><div class="sp-firma3-logo">Firma 3</div><div class="info">This is a small Tooltip with the Classname 'Tooltip3'</div></div><br />
<div class="bks-sponsor"><div class="sp-firma4-logo">Firma 4</div><div class="info">This is a small Tooltip with the Classname 'Tooltip4'</div></div><br />
<div class="bks-sponsor"><div class="sp-firma5-logo">Firma 5</div><div class="info">This is a small Tooltip with the Classname 'Tooltip5'</div></div><br />
<div class="bks-sponsor"><div class="sp-firma6-logo">Firma 6</div><div class="info">This is a small Tooltip with the Classname 'Tooltip6'</div></div><br />
<div class="bks-sponsor"><div class="sp-firma7-logo">Firma 7</div><div class="info">This is a small Tooltip with the Classname 'Tooltip7'</div></div>
</div>

CSS

.article {
    width:400px;
    border:1px solid #000;
}
.infobox{
    position:absolute;
    z-index:999;
    left:-9999px;
    background-color:#dedede;
    padding:2px;
    border:1px solid #fff;
    width:300px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.infobox p{
    margin:0;
    padding:0;
    color:#fff;
    background-color:#adadad;
    padding:2px 7px;
}
.info{display:none}
.firma {width: 400px;}

JavaScript

function simple_tooltip(target_items, name) {
    $(target_items).each(function (i) {
        $($(this)).append("<div class='" + name + "' id='" + name + i + "'><p>" + $(this).find(".info").html() + "</p></div>");
        var my_tooltip = $("#" + name + i);
        if (typeof ($(this).find(".info").html()) != "" && typeof ($(this).find(".info").html()) != 'undefined') {
            $(this).find(".info").remove();
            $(this).mouseover(function () {
                my_tooltip.css({
                    opacity: 1,
                    display: "none"
                }).fadeIn(400);
            }).mousemove(function (galmouse) {
                var border_top = $($(this).parent()).scrollTop();
                var border_right = $($(this).parent()).width();
                var left_pos;
                var top_pos;
                var offset = 25;
                console.log(border_top);              
                if (border_right - (offset * 2) >= my_tooltip.width() + galmouse.pageX) {
                    left_pos = galmouse.pageX + offset;
                } else {
                    left_pos = border_right - my_tooltip.width() - offset;
                }
                if (border_top + (offset * 2) >= galmouse.pageY - my_tooltip.height()) {
                    top_pos = border_top + offset;
                } else {
                    top_pos = galmouse.pageY - my_tooltip.height() - offset;
                }
                my_tooltip.css({
                    left: left_pos,
                    top: top_pos
                });
            }).mouseout(function () {
                my_tooltip.css({
                    left: "-9999px"
                });
            });
        }
    });
}
$(document).ready(function () {
    simple_tooltip("div.bks-sponsor", "infobox");
});