JSFiddle - React, Tailwind, and code Playground

by nju33

HTML

<div id="js_tooltip" class="box" title="黒い！aaaaaaaaaaaaaaaaaaaa"></div>

SCSS

body {
    position: relative;
    width: 5em
}

.box {
    cursor: pointer;
    height: 3em;
    width: inherit;
    background-color: #3c3c3c;
}

.tooltip {
    padding: .5em;
    background-color: #9CB5BC;
    margin: .5em;
    &:before {
        content: "";
        width: 0;
        height: 0;
        border-width: 0 5px 5px 5px;
        border-style: solid;
        border-color: transparent transparent #9CB5BC transparent;
        position: absolute;
        top: -.3em;
        left: 2em;
    }
}

JavaScript

$(function() {
    var $target = $("#js_tooltip");
    var $tooltipDom = '<div><div class="tooltip"></div><div>';
    var $tooltipElm = $(document); // 仮のセレクタ
    var $parent = $("body");
    
    $target.on("mouseover", function() {
        var message = $(this).attr("title");
        var targetHeight = $target.outerHeight();
        $parent.append($tooltipDom);
        $tooltipElm = $(document).find(".tooltip");
        $tooltipElm.text(message)
            .addClass("tooltip").css({
                "position": "absolute",
                "top": $tooltipElm.outerHeight(true)
            });
        $parent.css("height", targetHeight + ($tooltipElm.outerHeight(true) / 2));
        $parent.on("mouseleave", function() {
            $tooltipElm.remove();
            $parent.css("height", targetHeight);
        });
    });
});