JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.js"></script>
<ul class="subindex">
<li><a href="#" data-tootltip="one" title="Title">Hover for tip 1</a></li>
<li><a href="#" data-tootltip="two" title="Title">Hover for tip 2</a></li>
<li><a href="#" data-tootltip="three" title="Title">Hover for tip 3</a></li>
</ul>

JavaScript

$(document).each(function(){
   $('a[data-tootltip]').qtip({
		content: {
		title: {
				   text: function(api) {
					   return $(this).attr('title');
				   }
				}
			},
      events: {
         render: function(event, api) {
            var id = api.elements.target.attr('data-tootltip');
             url = 'http://fiddle.jshell.net/vivekdevaiah/g46Ga/2/show/';
            $(api.elements.content).load(url + ' #' + id);
             api.reposition();
         }
      },
   hide: {
	   effect: true
   },
	position: {
	viewport: $(window)
            },
	style: 'qtip-bootstrap'
 
  });
});