JSFiddle - React, Tailwind, and code Playground

by chrisloughnane

HTML

<script src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="600" height="600" id="green-square">
    <g>
        <path d="M199,106l121,-45l18,60l-32,60l-52,157l-99,-9l-13,-70l-17,8l-22,0l-11,-30l9,-26l61,-45l12,-6l21,-35l4,-19Z" id="svg_1" stroke-width="2" stroke="#000000" fill="aaa"/>
    </g>
    <text transform="null" font-style="normal" xml:space="preserve" text-anchor="middle" font-family="serif" font-size="70" id="svg_1" y="87.5" x="166" stroke="#f70e0e" fill="#fca919">Example</text>
</svg>

CSS

/* you can all use 

        content: {
            attr: 'id'
        }

etc. */

JavaScript

$(document).ready(function()
{
    $('path, text').qtip(
        {
            content: { 
                text: 'example of SVG support'
            },
            position: {
                target: 'mouse',
            adjust: {
                mouse: true,
                y: +20
        }
        }
    });
});