JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div class="article-content">
    <div class="gallery-sponsor">
        <div class="sp-firma0-logo sp-firma">
            <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>
    </div>
    <div class="gallery-sponsor">
        <div class="sp-firma1-logo sp-firma"></div>
        <div class="info">info2</div>
    </div>
    <div class="gallery-sponsor">
        <div class="sp-firma2-logo sp-firma"></div>
        <div class="info">info3</div>
    </div>
    <div class="gallery-sponsor">
        <div class="sp-firma3-logo sp-firma"></div>
        <div class="info">info4</div>
    </div>
    <div class="gallery-sponsor">
        <div class="sp-firma4-logo sp-firma"></div>
        <div class="info">info5</div>
    </div>
    <div class="gallery-sponsor">
        <div class="sp-firma5-logo sp-firma"></div>
        <div class="info">info6</div>
    </div>
</div>

CSS

.article-content {
    width:690px;
}
.left {
    text-align:right;
}
.left a {
    margin-right:40px;
}
.infobox {
    position:absolute;
    z-index:999;
    left:-9999px;
    background-color:#fff;
    border:1px solid #dedede;
    width:250px;
    padding:5px
}
.infobox p {
    color:#333;
    background-color:#fff;
    margin:0;
    padding:2px 7px
}
.gallery-sponsor {
    width:184px;
    height:137px;
    float:left;
    background:#dedede;
    margin:23px
}
.sp-firma {
    width:182px;
    height:125px;
    background:#333;
    margin:0 auto;
}
.info {
    display:none
}

JavaScript

function simple_tooltip(target_items, name) {
    $(target_items).each(function (i) {
        var element = $(".gallery-sponsor div div.info").attr('class');
        console.log(element);
        $(".article-content").append("<div class='" + name + "' id='" + name + i + "'>" + $(".gallery-sponsor div div.info").text() + "</div>");
        //console.log($(".article-content div div.info").html());
        var my_tooltip = $("#" + name + i);

        if ($(this).attr("title") != "" && $(this).attr("title") != "undefined") {

            $(this).removeAttr("title").mouseover(function () {
                my_tooltip.css({
                    opacity: 1,
                    display: "none"
                }).fadeIn(400);
            }).mousemove(function (partners) {
                var border_top = $(".article-content").scrollTop();
                var border_right = $(".article-content").width();
                console.log(border_top);
				console.log(border_right);
                var left_pos;
                var top_pos;
                var offset = 0;

                if (border_right - (offset * 2) >= my_tooltip.width() + partners.pageX) {
                    left_pos = partners.pageX + offset;
                } else {
                    left_pos = border_right - my_tooltip.width() - offset;
                }

                if (border_top + (offset * 2) >= partners.pageY - my_tooltip.height()) {
                    top_pos = border_top + offset;
                } else {
                    top_pos = partners.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(".sp-firma", "infobox");
});