JSFiddle - React, Tailwind, and code Playground

by Anchit Gupta

HTML

<body>
    <div>
        <div class="tooltip-wrapper">
            <div class="tooltip-arrow-up"></div>
            <div class="tooltip-box">
                <p class="tooltip-text"></p>
            </div>
            <div class="tooltip-arrow-down"></div>
        </div>
        <button id="tool1" class="button" type="button" title="Click me">Click Here!</button>
        <button id="tool2" class="button1" type="button" title="Click me">Click Here1!</button>
    </div>
</body>

CSS

.button {
    /* position:absolute; */
    top:200px;
    left:100px;
}
.button1 {
    /* position:absolute; */
    top:100px;
    left:200px;
}
.tooltip-box {
    min-height:90px;
    width:200px;
    max-width:200px;
    background-color:grey;
    z-index: 98;
    border-style:solid;
    border-width:medium;
    border-color:white;
    border-radius:3%;
    background: linear-gradient(to bottom, rgba(192, 192, 192, 1), rgba(26, 26, 26, 1));
    box-shadow:0 0 10px grey;
}
.tooltip-arrow-down {
    width: 0;
    height: 0;
    border-style:solid;
    border-width:medium;
    border-color:white;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid black;
    margin-left:88px;
    z-index: 99;
    margin-top:-3px;
}
.tooltip-arrow-up {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid black;
    z-index:99;
    margin-left:88px;
}
.tooltip-text {
    color:#eee;
    font-size:12px;
    padding-left:20px;
    padding-right:20px;
    text-align:center;
}

JavaScript

$(document).ready(function (e) {
    $.fn.tooltip = function(options) {
    var toolHide = $(".tooltip-wrapper").hide();
    var timeout;
    this.css({"position":"absolute"});
    this.click(function (e) {
        var posX = $(this).offset().left,
            posY = $(this).offset().top;
        var buttonWidthUp = $(this).width() / 2,
            buttonHeight = $(this).height();
        var tooltipHeight = $('.tooltip-wrapper').height(),
            finalPosX = posX + buttonWidthUp,
            finalPosY = posY - tooltipHeight,
            finalPointUp = finalPosX - 100,
            finalPointDown = posY + buttonHeight;
        var tooltipCss;
        var settings = $.extend({
            text: "This is the text in tooltip"
        }, options );
        $('.tooltip-wrapper').find('.tooltip-text').text(settings.text);
        if (posY < tooltipHeight) {
            tooltipCss = $(".tooltip-wrapper").css({
                "position": "absolute",
                "top": finalPointDown + 5,
                "left": finalPointUp
            });
            $('.tooltip-wrapper').find('.tooltip-arrow-down').hide();
        } else {
            //alert(finalPosX + " " + finalPointUp + " " + posX + " " + posY + " " + tooltipHeight + " " + finalPosY);
            tooltipCss = $(".tooltip-wrapper").css({
                "position": "absolute",
                "top": finalPosY,
                "left": finalPointUp
            });
            $('.tooltip-wrapper').find('.tooltip-arrow-up').hide();
        }
        $(".tooltip-wrapper").show();
        window.clearTimeout(timeout);
        timeout = setTimeout(function () {
            $(".tooltip-wrapper").fadeOut("slow");
        }, 5000);
    });
        return this;
    };
});
$('.button').tooltip({text:"anchit gupta anchit gupta anchit gupta anchit gupta anchit gupta anchit gupta anchit gupta anchit gupta anchit gupta v anchit gupta anchit gupta 1111111 1111111 1111111 1111111 1111111 1111111 1111111 1111111...