JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://plugins.learningjquery.com/cluetip/jquery.cluetip.js"></script>
<link rel="stylesheet" href="http://plugins.learningjquery.com/cluetip/jquery.cluetip.css">
<a class="title" title="hello" href="http://plugins.learningjquery.com/cluetip/demo/ajax3.html" rel="http://plugins.learningjquery.com/cluetip/demo/ajax3.html">This example</a>
<a class="basic" href="http://plugins.learningjquery.com/cluetip/demo/ajax.html" rel="http://plugins.learningjquery.com/cluetip/demo/ajax.html">Basic</a>
CSS
.cluetip-close { float: right; margin-top: -40px; }
JavaScript
var title;
$('a.title').cluetip({
closePosition: 'top',
sticky: true,
closeText: '<img src="http://plugins.learningjquery.com/cluetip/demo/cross.png" alt="close" width="16" height="16" />Close',
ajaxCache: false,
ajaxSettings: {
success: function(data) {
title = "Your new Title";
$(this).attr("title", title);
}
},
onShow : function(ct,c) {
$(".cluetip-title").text(title);
}
});
$('a.basic').cluetip();