JSFiddle - React, Tailwind, and code Playground

by divyesh25487

HTML

<!-- do not give your a tags a title attribute if you 
dont want the default tooltip to appear on hover, use
xhover as the modified plugin source uses this attribute 
instead -->
<a href="#" xtitle="This is a tooltip">Hello</a>

CSS

body {
    padding: 50px;    
}

JavaScript

/* start of plugin code */
(function($) {

    $.fn.easyTooltip = function(options){
      
        // default configuration properties
        var defaults = {    
            xOffset: 10,        
            yOffset: 25,
            tooltipId: "easyTooltip",
            clickRemove: true,
            content: "",
            useElement: ""
        }; 
            
        var options = $.extend(defaults, options);  
        var content;
                
        this.each(function() {                  
            var title = $(this).attr("xtitle");                
            
            $(this).click(function(e) {
                /* the following code was originially inside the .hover handler */
                /* start */
                content = (options.content != "") ? options.content : title;
                content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
                $(this).attr("title","");                                                      
                if (content != "" && content != undefined){            
                    
                    if($("#" + options.tooltipId).length == 0) {
                        $("body").append("<div id='"+ options.tooltipId +"'>"+ content +"</div>");        
                    }
                    $("#" + options.tooltipId)
                        .css("position","absolute")
                        .css("top",(e.pageY - options.yOffset) + "px")
                        .css("left",(e.pageX + options.xOffset) + "px")                        
                        .css("display","none")
                        .fadeIn("fast")
                }
                /** end **/
                        
            });
            $(this).hover(function(e){
                /* orginal code that was here has been moved to the click handler */
                e.preventDefault();
                return true;
            },
            function(){    
                $("#" +...