JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript">
/*!
* jquery.qtip. The jQuery tooltip plugin
*
* Copyright (c) 2009 Craig Thompson
* http://craigsworks.com
*
* Licensed under MIT
* http://www.opensource.org/licenses/mit-license.php
*
* Launch : February 2009
* Version : 1.0.0-rc3
* Released: Tuesday 12th May, 2009 - 00:00
* Debug: jquery.qtip.debug.js
*/
"use strict"; // Enable ECMAScript "strict" operation for this function. See more: http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
/*jslint browser: true, onevar: true, undef: true, nomen: true, eqeqeq: true, bitwise: true, regexp: true, strict: true, newcap: true, immed: true */
/*global window: false, jQuery: false */
(function ($) {
// Assign cache and event initialisation on document load
$(document).ready(function () {
// Adjust positions of the tooltips on window resize or scroll if enabled
var i;
$(window).bind('resize scroll', function (event) {
for (i = 0; i < $.fn.qtip.interfaces.length; i++) {
// Access current elements API
var api = $.fn.qtip.interfaces[i];
// Update position if resize or scroll adjustments are enabled
if(api && api.status && api.status.rendered && api.options.position.type !== 'static' && api.elements.tooltip.is(':visible') &&
(api.options.position.adjust.scroll && event.type === 'scroll' || api.options.position.adjust.resize && event.type === 'resize')) {
// Queue the animation so positions are updated correctly
api.updatePosition(event, true);
}
}
});
// Hide unfocus toolipts on document mousedown
$(document).bind('mouseenter.qtip', function (event) {
if($(event.target).parents('div.qtip').length === 0) {
var tooltip = $('.qtipSelector'),
api = tooltip.qtip('api');
// Only hide if its visible and...
JavaScript
$(document).ready(function() {
$("a").qtip({content: 'This is an active list element'});
$("a").css("backgroundColor","red");
});