JSFiddle - React, Tailwind, and code Playground

by artwl

HTML

<span class="icon-help one">One One One One One One One One One One One One One One One One </span>
<span class="icon-help two">Two Two Two Two Two Two Two Two Two </span>
<span class="icon-help three">Three  Three  Three  Three  Three  Three  Three  Three  Three  Three  Three  Three  Three  Three  Three  Three  Three  Three  </span>
<span class="icon-help four">Four Four Four Four</span>
<span class="icon-help five">Five Five Five Five Five Five Five Five Five Five Five Five Five Five Five Five Five Five Five Five</span>
<div class="tip-help-wrap">
    <div class="tip-help-content"></div>
    <div class="tip-direction">
        <span class="tip-corner-inner">◆</span>
        <span class="tip-corner-outer">◆</span>
    </div>
</div>

CSS

body{
    padding:10px;
    min-height:400px;
}
.tip-help-wrap{
    position:absolute;
    margin:10px;
    color: #F60;
    width: 240px;
    display:none;
}
.tip-help-content{
    padding:5px;
    border:1px solid #99CFEB;
    background:#F4FAFD;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    -khtml-border-radius:4px;
    border-radius:4px;
    min-height:36px;
}
.tip-direction{
    position:absolute;
    height:19px;
}
.tip-direction span {
    height: 19px;
    width: 17px;
    font-family: Simsun;
    font-size: 16px;
    line-height: 21px;
    overflow: hidden;
    position: absolute;
}
.tip-direction span.tip-corner-inner{
    color:#F4FAFD;
    z-index:2;
}
.tip-direction span.tip-corner-outer{
    color:#99CFEB;
    z-index:1;
}
.tip-direction-left-top{
    top:10px;
    left:-7px;
    width:8px;
    overflow:hidden;
}
.tip-direction-left-top span.tip-corner-inner{
    left:1px;
}


.tip-direction-left-bottom{
    bottom:10px;
    left:-7px;
    width:8px;
    overflow:hidden;
}
.tip-direction-left-bottom span.tip-corner-inner{
    left:1px;
}

.tip-direction-right-top{
    top:10px;
    right:-9px;
    width:17px;
}
.tip-direction-right-top span.tip-corner-inner{
    left:-1px;
}

.tip-direction-right-bottom{
    bottom:10px;
    right:-9px;
    width:17px;
}
.tip-direction-right-bottom span.tip-corner-inner{
    left:-1px;
}

.tip-direction-top-left{
    top:-10px;
    left:10px;
    width:17px;
}
.tip-direction-top-left span.tip-corner-inner{
    top:1px;
}

.tip-direction-top-right{
    top:-10px;
    right:10px;
    width:17px;
}
.tip-direction-top-right span.tip-corner-inner{
    top:1px;
}

.tip-direction-bottom-left{
    bottom:-9px;
    left:10px;
    width:17px;
}
.tip-direction-bottom-left span.tip-corner-inner{
    top:-1px;
}

.tip-direction-bottom-right{
    bottom:-9px;
    right:10px;
    width:17px;
}
.tip-direction-bottom-right span.tip-corner-inner{
    top:-1px;
}

.icon-help{
    display:inline-block;
   ...

JavaScript

function getElementsByClassName(searchClass,node,tag){
    if(document.getElementsByClassName){
        return document.getElementsByClassName(searchClass);
    } else {
        var results=[];
        var eles = (node || document).getElementsByTagName((tag || "*"));
        var i= eles.length;
        var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
        while(--i>=0){
            if(pattern.test(eles[i].className)){
                results.push(eles[i]);
            }
        }
        return results;
    }
}

function getCSS(obj,prototype){
    if(obj.currentStyle){
        return obj.currentStyle[prototype];
    } else {
        return document.defaultView.getComputedStyle(obj,null)[prototype];
    }
}

function bindTip(tipclassName){
    var iconHelps = getElementsByClassName(tipclassName);
    for(var i=0,j=iconHelps.length;i<j;i++){
        iconHelps[i].onmouseover = function(){
            var pos=this.getBoundingClientRect(),
                tip=getElementsByClassName("tip-help-wrap",document,"div")[0],
                direction = getElementsByClassName("tip-direction",tip,"div")[0],
                className = "tip-direction-left-top",
                boxWidth = parseInt(getCSS(tip,"width")),
                windowWidth = window.innerWidth || document.body.clientWidth,
                windowHeight = window.innerHeight || document.body.clientHeight;

            tip.style.left = "auto";
            tip.style.right = "auto";
            tip.style.top = "auto";
            tip.style.bottom = "auto";
            if(windowHeight - pos.bottom > 50){
                if(windowWidth-pos.left-30 < boxWidth){
                    tip.style.left = (pos.left-boxWidth-20) + "px";
                    tip.style.top = (pos.top - 20) + "px";
                    className="tip-direction-right-top";
                } else {
                    tip.style.left = (pos.left + 15) + "px";
                    tip.style.top = (pos.top - 20) + "px";
                }
 ...