JSFiddle - React, Tailwind, and code Playground

by oisinlavery

HTML

<script src="https://raw.github.com/Sebobo/jquery.smallipop/develop/lib/jquery.smallipop.js"></script>
<ul>
    <li title="tip 1"></li>
    <li title="tip 2"></li>
    <li title="tip 3"></li>
    <li title="tip 4"></li>
    <li title="tip 5"></li>
</ul>

CSS

ul{
margin:100px;
padding:0;
}

li{
display:block;
float:left;
height:50px;
width:50px;
border:1px solid black;
background:red;
}


.smallipopHint{display:none}#smallipop{position:absolute;display:none;top:0;left:0;background-color:#314b64;border:1px solid #0f161e;color:#d2dfe7;z-index:9999;max-width:400px}#smallipop .sipContent{padding:10px}#smallipop .sipArrow,#smallipop .sipArrowBorder{position:absolute;left:50%;height:0;width:0}#smallipop .sipArrow{bottom:-20px;margin-left:-10px;border:10px solid transparent}#smallipop .sipArrowBorder{bottom:-24px;margin-left:-12px;border:12px solid transparent}#smallipop.sipAlignLeft .sipArrow{margin-left:0;left:auto;right:20px}#smallipop.sipAlignLeft .sipArrowBorder{margin-left:0;left:auto;right:18px}#smallipop.sipAlignRight .sipArrow{margin-left:0;left:20px;right:auto}#smallipop.sipAlignRight .sipArrowBorder{margin-left:0;left:18px;right:auto}#smallipop.sipAlignBottom .sipArrow{bottom:auto;top:-20px}#smallipop.sipAlignBottom .sipArrowBorder{bottom:auto;top:-24px}#smallipop.sipPositionedLeft .sipArrow,#smallipop.sipPositionedLeft .sipArrowBorder{right:-16px;left:auto;top:50%;bottom:auto;border-width:8px;margin:-8px 0 0}#smallipop.sipPositionedLeft .sipArrowBorder{right:-20px;border-width:10px;margin:-10px 0 0}#smallipop.sipPositionedRight .sipArrow,#smallipop.sipPositionedRight .sipArrowBorder{left:-16px;right:auto;top:50%;bottom:auto;border-width:8px;margin:-8px 0 0}#smallipop.sipPositionedRight .sipArrowBorder{left:-20px;border-width:10px;margin:-10px 0 0}#smallipop a{color:#98cbea}#smallipop.default{text-shadow:0 -1px 1px #0f161e}#smallipop.default .sipContent{border-top:1px solid #586d82}#smallipop.default a{text-shadow:0 -1px 1px #0f161e}#smallipop.default .sipArrow{border-color:#1a2634 transparent transparent transparent}#smallipop.default .sipArrowBorder{border-color:#0f161e transparent transparent transparent}#smallipop.default.sipAlignBottom .sipArrow{border-color:transparent transparent #1a2634...

JavaScript

$("li").smallipop({
    triggerOnClick:true
});