JSFiddle - React, Tailwind, and code Playground
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">
<a class="qTip" title="Experience 1">
(Experience 1)
</a>
<div style="display:none;">Date Start: 2014-04-08 10:00:00 Date End: 2014-04-10 15-00-00</div>
<a class="qTip" title="Experience 2">
(Experience 2)
</a>
<div style="display:none;">
<p>Date Start: 2014-04-08 10:00:00</p>
<p>Date End: 2014-04-10 13-00-00</p>
</div>
<a class="qTip" title="Testing a little">
(Experience 3)
</a>
<div style="display:none;">
<p>Date Start: 2014-04-08 10:00:00</p>
<p>Date End: 2014-04-10 12-00-00</p>
</div>
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-youtube'
},
content: {
title: title,
//text: value // The problem is here (on the `text` option)
text: value
}
});
}
});