JSFiddle - React, Tailwind, and code Playground

by Steve Thompson

HTML

<script src="http://qtip2.com/v/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://qtip2.com/v/nightly/jquery.qtip.css">
<a class="tip" href="#" data-tooltip="1">Click me!</a>

<a class="tip" href="#" data-tooltip="2">Click me!</a>

<a class="tip" href="#" data-tooltip="3">Click me!</a>

<a class="tip" href="#" data-tooltip="1">Click me!</a>

<div class="hidden elem">aaaaaaaaaaaaaaaaa 1</div>
<div class="hidden elem">bbbbbbbbbbbbbbbbb 2 <a href="#" title="bbbbbbbbbbbbbbbbb 2">link</a>
</div>
<div class="hidden elem">ccccccccccccccccc 3</div>

CSS

body {
    padding: 50px;
}
.hidden {
    display: none;
}

.d3-tip {
   cursor: pointer;
   padding: 10px;
   background: #3c3f42;
   color: #fff;
   border-radius: 2px;
   font-size: 10px;
 }

JavaScript

$(document).ready(function () {
    var arrayData = [],
        elems = $('.elem'),
        tips = $('.tip');

    tips.each(function (i) {
        arrayData.push(parseInt($(this).data('tooltip'), 10) - 1);
        var text = $(elems[arrayData[i]]).clone();

        $(this).qtip({
            content: {
                text: text
            },
            style: 'd3-tip'
        });
    });
});