JSFiddle - React, Tailwind, and code Playground

by NinjaFish

HTML

<script src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.min.css">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="50">
    <rect x="0" y="0" width="50" height="50" fill="#ff0000"></rect>
</svg>
<div id="message" style="display: none;">MOUSEENTER!!!</div>

JavaScript

$(document).ready(function() {
    $("rect").qtip({
        content: "Test",
        show: {
            delay: 0
        }
    })
        .bind("mouseenter", function() {
            $("#message").show();
        })
        .bind("mouseleave", function() {
            $("#message").hide();
        });
});