JSFiddle - React, Tailwind, and code Playground

by Donald Moore

HTML

<h3>
  click a link
</h3>
<div class="blog" id="blog">
    <div class="panel panel-default widget-panel">
        <div class="tag-box block">
            <a class="tag-block" href="#">
                0000

                <span class="tooltip-text">
                    tag-blockIndex: 0000
                </span>
            </a>

            <a class="tag-block" href="#">
                0001

                <span class="tooltip-text">
                    tag-blockIndex: 0001
                </span>
            </a>

            <a class="tag-block" href="#">
                0010

                <span class="tooltip-text">
                    tag-blockIndex: 0010
                </span>
            </a>

            <a class="tag-block" href="#">
                0011

                <span class="tooltip-text">
                    tag-blockIndex: 0011
                </span>
            </a>

            <a class="tag-block" href="#">
                0100

                <span class="tooltip-text">
                    tag-blockIndex: 0100
                </span>
            </a>

            <a class="tag-block" href="#">
                0101

                <span class="tooltip-text">
                    tag-blockIndex: 0101
                </span>
            </a>

            <a class="tag-block" href="#">
                0111

                <span class="tooltip-text">
                    tag-blockIndex: 0111
                </span>
            </a>

            <a class="tag-block" href="#">
                1000

                <span class="tooltip-text">
                    tag-blockIndex: 1000
                </span>
            </a>

            <a class="tag-block" href="#">
                1001

                <span class="tooltip-text">
                    tag-blockIndex: 1001
                </span>
            </a>
        </div>
    </div>
</div>

CSS

.blog .widget-panel {
    height: 200px;
    width: 200px;
    margin: 20px;
    position: fixed;
}

.blog .widget-panel .tag-box {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}

.blog .widget-panel .tag-box.remove-over-flow {
    overflow-x: visible;
    overflow-y: visible;
}

.blog .widget-panel .tag-box .tag-block {
    display: block;
    line-height: 28px;
    border-bottom: 1px dotted rgba(0,0,0,0.1);
    padding: 7px;
    color: #777;
    background-color: #fff;

    position: static;
}

.blog .widget-panel .tag-box .tag-block .tooltip-text {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    margin-left: 10px;
    padding-left: 5px;
    border-radius: 6px;
    z-index: 1;

    white-space: nowrap;

    /* Position the tooltip text - see examples below! */
    position: fixed;
}

.blog .widget-panel .tag-box .tag-block .tooltip-text::after {
    content: " ";
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;

    /* Position the tooltip text - see examples below! */
    position: absolute;
}


.blog .widget-panel .tag-box .tag-block:hover .tooltip-text,
.blog .widget-panel .tag-box .tag-block.selected .tooltip-text {  
    visibility: visible;
    /*background-color: #38B7EA;*/
    /*color: #fff;*/
}

JavaScript

$(".tag-block").on('click', function () {
	$(".tag-box").toggleClass("remove-over-flow");
});
/*
$(".tag-block").hover( function() {
	$(".tooltip-text").outerWidth(400);
});
*/
$(".tag-block").hover( function() {
            fixPosition($('.tag-block'),$('.tooltip-text'));
});

function fixPosition(block,tooltip){
      var blockLeft = block.offset().left + block.outerWidth();
        /*tooltip.css('left', blockLeft + "px");*/
        /*tooltip.css('bottom', block.offset().bottom + "px");*/
}
do {
$('.blog').on('mousemove', function(e){
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        $('.tooltip-text').css({'left': x + 22, 'top': y + 34}); 
});
}
while (false);