JSFiddle - React, Tailwind, and code Playground

by devangkantharia

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css">
<div id="inner-dataContainer">
    <div id="tooltipsWrapper">
<a class="qTip" title="Experience 1" data="text1">
 (Experience 1)
</a>

<a class="qTip" title="Experience 2" data="text2">
 (Experience 2)
</a>

<a class="qTip" title="Testing a little" data="text3">
 (Experience 3)
</a>

    </div>
</div>
<ul class="popupContent hide">
    <li id="text1" class="popupText">Date Start: 2014-04-08 10:00:00 Date End: 2014-04-10 15-00-00</li>
    <li id="text2" class="popupText">
        <p>Date Start: 2014-04-08 10:00:00</p>
        <p>Date End: 2014-04-10 13-00-00</p>
    </li>
    <li id="text3" class="popupText">
        <p>Date Start: 2014-04-08 10:00:00</p>
        <p>Date End: 2014-04-10 12-00-00</p>
    </li>
</ul>

CSS

.hide {
    display: none;
}

JavaScript

/*
$('a').each(function () {
    if ($(this).hasClass('qTip')) {
        var value = $(this).next('div')[0].innerHTML
        var title = $(this).attr('title');
        $('.qTip').qtip({
            style: {
                classes: 'qtip-bootstrap'
            },
            content: {
                title: title,
                //text: value // The problem is here (on the `text` option)
                text: value
            }
        });
    }
});
*/

$('#tooltipsWrapper a').each(function () {
    var dataValue = $(this).attr("data");
    aaa = $(".popupContent").find("li#" + dataValue).text();
    $(this).qtip({
        content: {
            text: aaa
        },
        position: {
            target: 'mouse', // Position it where the click was...
            adjust: {
                scroll: true,
                method: 'shift none'
            },
            viewport: $("#inner-dataContainer"),
            my: 'top center'
            /*,
						at: 'bottom left'*/
        },
        style: {
            classes: 'qtip-cream qtip-rounded qtip-shadow custom-styling',
            width: '170px'
        },
        hide: {
            distance: 10
        }
    });
});