JSFiddle - React, Tailwind, and code Playground
HTML
<div id="Item1111" class="danotip">
Me
</div>
CSS
/*
* qTip2 - Pretty powerful tooltips
* http://craigsworks.com/projects/qtip2/
*
* Version: 2.0.0pre
* Copyright 2009-2010 Craig Michael Thompson - http://craigsworks.com
*
* Dual licensed under MIT or GPLv2 licenses
* http://en.wikipedia.org/wiki/MIT_License
* http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Thu Jan 6 22:14:48 2011 +0000
*/
/* Fluid class for determining actual width in IE */
.ui-tooltip-fluid{
display: block;
visibility: hidden;
position: static !important;
float: left !important;
max-width: none !important;
min-width: 0px !important;
max-height: none !important;
min-height: 0px !important;
}
.ui-tooltip, .qtip{
position: absolute;
left: -31000px;
top: -31000px;
max-width: 280px;
min-width: 50px;
outline: none;
}
.ui-tooltip-content{
position: relative;
padding: 5px 9px;
overflow: hidden;
border-width: 1px;
border-style: solid;
text-align: left;
word-wrap: break-word;
overflow: hidden;
}
.ui-tooltip-titlebar{
position: relative;
min-height: 19px;
padding: 5px 35px 4px 10px;
overflow: hidden;
border-width: 1px 1px 0;
border-style: solid;
font-weight: bold;
}
div.ui-tooltip-titlebar + div.ui-tooltip-content{ border-top-width: 0px; }
/*! Default close button class */
.ui-tooltip-titlebar .ui-state-default{
position: absolute;
right: 5px;
top: 50%;
margin-top: -9px;
cursor: pointer;
outline: medium none;
border-width: 1px;
border-style: solid;
}
.ui-tooltip-titlebar .ui-icon,
.ui-tooltip-icon .ui-icon{
display: block;
text-indent: -1000em;
}
.ui-tooltip-icon, .ui-tooltip-icon .ui-icon{
-moz-border-radius:...
JavaScript
/*
* qTip2 - Pretty powerful tooltips
* http://craigsworks.com/projects/qtip2/
*
* Version: 2.0.0pre
* Copyright 2009-2010 Craig Michael Thompson - http://craigsworks.com
*
* Dual licensed under MIT or GPLv2 licenses
* http://en.wikipedia.org/wiki/MIT_License
* http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Thu Jan 6 22:14:48 2011 +0000
*/
"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, bitwise: true, regexp: true, newcap: true, immed: true, strict: true */
/*global window: false, jQuery: false */
(function($, window, undefined) {
// Munge the primitives - Paul Irish tip
var TRUE = true,
FALSE = false,
NULL = null,
// Shortcut vars
uitooltip = 'ui-tooltip',
widget = 'ui-widget',
disabled = 'ui-state-disabled',
selector = '.qtip.'+uitooltip,
focusClass = uitooltip + '-focus',
hideOffset = '-31000px';
// Option object sanitizer
function sanitizeOptions(opts)
{
var content;
if(!opts) { return FALSE; }
if('object' !== typeof opts.metadata) {
opts.metadata = {
type: opts.metadata
};
}
if('content' in opts) {
if('object' !== typeof opts.content || opts.content.jquery) {
opts.content = {
text: opts.content
};
}
content = opts.content.text || FALSE;
if(!$.isFunction(content) && ((!content && !content.attr) || content.length < 1 || ('object' === typeof content && !content.jquery))) {
content = opts.content.text = FALSE;
}
if('title' in opts.content && 'object' !== typeof opts.content.title) {
opts.content.title = {
text: opts.content.title
};
}
}
if('position' in opts) {
if('object'...