JSFiddle - React, Tailwind, and code Playground

by RevConcept

HTML

<div class="mbt-hover" style="width:100px; height:auto;">
        <p>Test Text</p>
        <div class="mbt-tooltip" style="width:200px; height:auto;">
            <p>Test pop-up <a title="About" href="http://www.mindblowingthings.dev/about/">content</a>
            <ul>
                <li>this</li>
                <li>is</li>
                <li>a list</li>
            </ul>
        </div>
    </div>

CSS

#tooltip {
    text-align: center;
    color: #fff;
    background: #111;
    position: absolute;
    z-index: 100;
    padding: 15px;
    }
 
    #tooltip:after {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #111;
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        margin-left: -10px;
    }
 
        #tooltip.top:after {
            border-top-color: transparent;
            border-bottom: 10px solid #111;
            top: -20px;
            bottom: auto;
        }
 
        #tooltip.left:after {
            left: 10px;
            margin: 0;
        }
 
        #tooltip.right:after {
            right: 10px;
            left: auto;
            margin: 0;
        }


    .mbt-tooltip {
        display: none;
        width: auto;
        max-width: 100% !important;
    } 

    .mbt-hover {
        border: 1px solid red;
    }

JavaScript

$( function() {

        var targets = $('.mbt-hover'),
            target  = false,
            tooltip = false,
            title   = false;
     
        targets.bind( 'mouseenter', function()
        {
            target  = $( this );
            tip     = target.children('.mbt-tooltip');
            tooltip = $( '<div id="tooltip"></div>' );
     
            if( !tip || tip == '' )
                return false;
            
            //target.remove('.mbt-tooltip');
            //target.removeAttr( 'title' );
            tooltip.css( 'opacity', 0 )
                   
                   .html( tip.clone().show() )

                   .appendTo( target );
     
            var init_tooltip = function()
            {
                if( $( window ).width() < tooltip.outerWidth() * 1.5 )
                    tooltip.css( 'max-width', $( window ).width() / 2 );
                else
                    tooltip.css( 'max-width', 340 );
     
                var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
                    pos_top  = target.offset().top - tooltip.outerHeight() - 20;
     
                if( pos_left < 0 )
                {
                    pos_left = target.offset().left + target.outerWidth() / 2 - 20;
                    tooltip.addClass( 'left' );
                }
                else
                    tooltip.removeClass( 'left' );
     
                if( pos_left + tooltip.outerWidth() > $( window ).width() )
                {
                    pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
                    tooltip.addClass( 'right' );
                }
                else
                    tooltip.removeClass( 'right' );
     
                if( pos_top < 0 )
                {
                    var pos_top  = target.offset().top + target.outerHeight();
                    tooltip.addClass( 'top' );
                }
               ...