JSFiddle - React, Tailwind, and code Playground

by testtracker

HTML

<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-popover.js"></script>
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
 
<div class="container">  
<h2>Example of creating Modal with Twitter Bootstrap</h2>  
<div class="well">  
<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>  
</div>  
</div>

CSS

.box{display:block;width:200px;height:100px;background-color:#DDD;}
.popover-content{padding:0px 0px;}

JavaScript

$(function ()  
{ 
    
    
   $('#example').popover({
            html : true,
            trigger : 'manual',
            content : function() {
                return '<div class="box"></div>';
            }
        });
    $(document).on('mouseover', '#example', function(){
        $('#example').popover('show');
    });
    $(document).on('mouseleave', '#example', function(){
        $('#example').popover('hide');
    });
        
    
});