JSFiddle - React, Tailwind, and code Playground

by mesak

HTML

<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<div id="a" class="alert">
    test2
</div>


<div id="b" class="alert alert-info">
    <div class="popover top">
        <div class="arrow"></div>
        <h3 class="popover-title">Popover top</h3>
        <div class="popover-content">
          <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
      </div>
</div>

CSS

#a{
    width:300px;
    height:400px
}
#b{
    width:100px;
}

JavaScript

$('#a').mousemove(function(event){
    $( "#b" ).position({
        my: "left+3 bottom-3",
        of: event,
        collision: "fit"
    });
})