JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://projects.sebastianhelzle.net/jquery.smallipop/lib/jquery.smallipop.js"></script>
<link rel="stylesheet" href="http://projects.sebastianhelzle.net/jquery.smallipop/css/jquery.smallipop.css">
<body>
<label>testing with smalipop</label>
<div class="myElement" id="test" style="width:100px;height:200px;background:blue">
</div>
</body>
CSS
.weTrillForm{
font-size:28px;
font-weight:bold;
font-family: Helvetica;
width:320px;
}
.weTrillForm input{
font-size:28px;
width:290px;
}
.weTrillForm input:focus{
outline-color: #00aced;
}
.weTrillMore small{
color:#8a8a8a;
font-size:12px;
}
.weTrillMore{
width:260px;
}
.weTrillSubmit{
width:300px;
}
.weTrillSubmit button{
-moz-box-shadow:inset 0px -3px 7px 0px #29bbff;
-webkit-box-shadow:inset 0px -3px 7px 0px #29bbff;
box-shadow:inset 0px -3px 7px 0px #29bbff;
width:320px;
background-color:#00aced;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #0b0e07;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:normal;
padding:9px 23px;
text-decoration:none;
text-shadow:0px 1px 0px #263666;
}
.weTrillSubmit button:hover {
background-color:#60caf2;
}
JavaScript
var table = document.createElement('table');
for (var i = 1; i < 4; i++){
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var text1 = document.createTextNode('Text1');
var btn = document.createElement("BUTTON");
btn.className ="clickable";
var t = document.createTextNode("CLICK ME");
btn.appendChild(t);
$(btn).on( "click", function() {
alert('You clicked me');
console.log('you clicked me');
});
td1.appendChild(btn);
td1.appendChild(text1);
tr.appendChild(td1);
table.appendChild(tr);
}
var tooltipSpan = document.createElement('span');
tooltipSpan.className = "smallipop-hint";
tooltipSpan.appendChild(table);
$("#test").append(tooltipSpan);
$('.myElement').smallipop();