JSFiddle - React, Tailwind, and code Playground

by tiagocarvalho

HTML

<!DOCTYPE html>
<head> 

<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script>
$(function(){
  $('div[rel=popover]').popover({
      trigger: 'hover',
      placement: 'in top',
      animate: true,
      delay: 500,
});
});  
</script>    
</head>
<body> 

    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <div href="#" class="btn" rel="popover" style="position: relative; top:20;" data-content="<table ><tr><td onclick='alert();'>x</td></tr><tr><td>y</td></tr></table>" >hover for popover</div>
    
</body>

CSS

.btn {

display: inline-block;
padding: 4px 10px 4px;
margin-bottom: 0;
font-size: 15px;
line-height: 18px;
text-align: center;
vertical-align: middle;
cursor: pointer;
}

.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1010;
display: none;
padding: 5px;
}

.popover.top {
margin-top: -5px;
}

.popover.top .arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-top: 5px solid orange;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}

.popover .arrow {
position: absolute;
width: 0;
height: 0;
}

.popover-inner {
width: 150px;
padding: 3px;
overflow: hidden;
background: orange;
}

.popover-inner table{ width:100%; text-align:center; color:#FFF; text-family:verdana;}
.popover-inner td:hover{ background:#FAB266;}