JSFiddle - React, Tailwind, and code Playground

by mqchen

HTML

<h1>HTML Ipsum Presents</h1>
<button disabled="disabled" title="Disabled">Button</button>
<p><strong title="Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. ">Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em title="Hello">Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#" title="World hello akdjfølajdfkj øklasdjf ølakjsdfl kaj ølajsd øl">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>
	       
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>

CSS

.protip {
    background-color: rgba(25, 25, 25, 1);
    padding: 10px;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 400px;
}

body {
    margin: 40px;
    position: relative;
    font-family: sans-serif;
    font-size: 0.75em;
}

JavaScript

/**
 * Positions:
 north
 east
 south
 west
 nne
 nee
 see
 sse
 ssw
 sww
 nww
 nnw
 */

var Protip = function(customOptions) {
    this.options = {
        event : "mousemove",
        container : $("body"),
        titleAttr : "title",
        tmpTitleAttr : "data-title",
        defaultPosition : "south",
        tryPositions : ["south", "north", "west", "east"],
        tooltipElement : $("<span class=\"protip\"></span>")
    };
    
    this.currentHoverElement = null;
    
    $.extend(this.options, customOptions, true);
    
    this._addEvents();
}

Protip.prototype._calcIntersect = function(elPos, containerPos) {
    var r = {
        xOverlap : Math.max(0, Math.min(elPos.endX, containerPos.endX) - Math.max(elPos.startX , containerPos.startX)),
        yOverlap : Math.max(0, Math.min(elPos.endY, containerPos.endY) - Math.max(elPos.startY , containerPos.startY)),
    };
    r.overlapArea = r.xOverlap * r.yOverlap;
    r.outsidePixels = elPos.width * elPos.height - r.overlapArea;
        
    return r;
}

Protip.prototype._showTooltipPos_south = function(elPos, tooltipDim, containerPos) {
    var dim = {
        startY: elPos.endY,
        startX: elPos.startX + (elPos.endX - elPos.startX) / 2 - tooltipDim.width / 2,
        width: tooltipDim.width,
        height: tooltipDim.height
    };
    dim["endX"] = dim.startX + dim.width;
    dim["endY"] = dim.startY + dim.height;
    
    return {
        "dim" : dim,
        css : { top: dim.startY + "px", left: dim.startX + "px" }
    }
}

Protip.prototype._showTooltipPos_north = function(elPos, tooltipDim, containerPos) {
    var dim = {
        startY: elPos.startY - tooltipDim.height,
        startX: elPos.startX + (elPos.endX - elPos.startX) / 2 - tooltipDim.width / 2,
        width: tooltipDim.width,
        height: tooltipDim.height
    };
    dim["endX"] = dim.startX + dim.width;
    dim["endY"] = dim.startY + dim.height;
    
    return {
        "dim" : dim,
        css : { top: dim.startY + "px",...