JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.0/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.0/jquery.qtip.min.css">
<p id="666">tooltip</p>

CSS

body {
    text-align: center;
    vertical-align: middle;
}

JavaScript

var qconfig = {
		show: 'mouseover',
		hide: { when: 'mouseout', fixed: true },
		position: { my: 'bottom center', at: 'top center', adjust: {y: 8} },
		style: { classes: 'qtip-light qtip-shadow' }
	};

$("#666").qtip($.extend(true, qconfig, { content: { text: "before", title: "title is here" }}));
$("#666").qtip('option', 'content.text', 'after');
$("#666").qtip('api').set('content.text', 'another after');