JSFiddle - React, Tailwind, and code Playground

by qwweee7467

HTML

<div class="container">
    <h1>
        ToolTip Quick Sample
    </h1>
    <p>
        <a href="#" class="tip_trigger">Text ToolTip<span class="tip">Text content</span></a>
    </p>
    
    <hr />
    
    <p>
        <a class="tip_trigger" href="http://www.google.com/">Google Search <span class="tip"
            style="width: 300px;">
            <img src="http://www.google.com.tw/intl/en_com/images/srpr/logo1w.png" alt="" /> Google began in January 1996 as a research project by Larry Page and Sergey Brin when they were both PhD students at Stanford University in California. </span>
        </a>
    </p>
    
    <hr />
    
    <p>
        <a class="tip_trigger" href="http://www.boston.com/bigpicture/" />The Big Picture
        - Boston.com <span class="tip" style="width: 450px;">
        <img src="http://cache.boston.com/universal/site_graphics/bcom_small.gif" style="float: left;
        margin-right: 20px;" alt="" /> Photo blog Lane Turner, Lloyd Young, and
        director of photography Paula Nelson.
        </p>
        
        <hr />
        
        <a href="http://www.the-digital-picture.com/Gallery/" target="_blank" class="tip_trigger">
            <img width="50" height="50" src="http://www.the-digital-picture.com/Images/Other/Image-Gallery.jpg" />
            <span class="tip">
                <img src="http://www.the-digital-picture.com/Images/Other/Image-Gallery.jpg" alt="" />
                <p> Canon and Nikon Digital SLR Camera and Lens Sample Pictures<p>
            </span>
        </a>
</div>

CSS

/*--Tooltip Styles--*/
.tip
{
    color: #fff;
    background: #1d1d1d;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.tip_trigger .tip
{
    display: none;
}

JavaScript

/* Tooltip sample*/
$(function() {
    $('.tip_trigger').each(function() {
        var tip = $(this).find('.tip');

        $(this).hover(

        function() {
            tip.appendTo('body');
        }, function() {
            tip.appendTo(this);
        }).mousemove(function(e) {
            var x = e.pageX + 20,
                y = e.pageY + 20,
                w = tip.width(),
                h = tip.height(),
                dx = $(window).width() - (x + w),
                dy = $(window).height() - (y + h);

            if (dx < 20) {x = e.pageX - w - 20;}
            if (dy < 20) {y = e.pageY - h - 20;}

            tip.css({
                left: x,
                top: y
            });
        });
    });

});