JSFiddle - React, Tailwind, and code Playground

by TCHdevlp

HTML

<div id="container">
    Lorem ipsum machin truc
</div>

CSS

.infoButton{
    padding:0 5px;
    background-color:red;
    color:white;
}
.infoBulle{
    border:1px solid #555;
    background-color:#AAA;
}

#container{
    border:1px solid silver;
    margin:20px;
    width:500px;
    height:400px;
}

JavaScript

/*
 * Infobulle.js
 * 
 * Ce plugin permet de créer simplement des infobulles dans une page web.
 * 
 * Pour créer une infobulle, il suffit de faire :
 * 
 * $("#idDeMonElement").infoBulle("texte que je souhaite afficher");
 * L'infobulle est rajoutée automatiquement au div parent de l'élément ciblé. Si le div parent n'est pas positionné, il le devient
 * L'infobulle est positionnée de façon absolue par rapport à son div parent.
 * L'infobulle peut être accrochée à n'importe quel type d'élement tant que celui-ci n'est pas descendant direct de <html>
 * 
 * 
 */
	
	(function($){ 
        $.fn.infoBulle=function(texte){   
			var $ib  = $("<div>");
			$ib.css("z-index","1");
			$ib.addClass("infoButton");
			
			var infobulle = $("<div>");
			infobulle.addClass("infoBulle");
			infobulle.css({"display":"none","position":"relative","top":"20px","left":"20px"});

			var infop = $("<p>");
			infop.addClass("infoBulleText");
			infop.prop("title","clisuez pour faire disparaitre");
			infop.text("aucun message");
			if(typeof texte != "undefined" && texte.length>0){
				infop.text(texte);
			}
			//infobulle.append(infop);
			//$ib.prop("title","cliquer pour faire disparaitre");
			infobulle.text(texte);
			$ib.text("!");
			$ib.append(infobulle);
			
			
			//positionnement
			var parentsblock = $(this).closest('div');
			var parentblock = parentsblock[0];
			
			/* _  if (window.console) console.log(parentblock);*/
			
			if(typeof parentblock == "undefined"){
				parentblock = $("body");
			}
			
			/* _   if (window.console) console.log($(parentblock).css('position').length + $(parentblock).css('position'));*/
			
			if($(parentblock).css('position') != "relative" || $(parentblock).css('position') != "absolute"){
				$(parentblock).css("position","relative");
			}
			
			/* _   if (window.console) console.log($(parentblock).css('position').length + $(parentblock).css('position'));*/
			
			var parentpos = $(this).offsetParent();
			var papapos =...