JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="es">

	<head>
        <title>Ejemplo</title>
		
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<!--[if lt IE 9]>
<script type="text/javascript">
    "'article aside footer header nav section time'".replace(/\w+/g,function(n){document.createElement(n)});
</script>
<![endif]-->
		
	<link rel="stylesheet" href="css/estilo.css" type="text/css" media="screen" />
    
	<script src="js/tooltip.js" type="text/javascript"></script>
 
</head>
	
	<body>

	<div class="pestanas_textos">
		
		<div>
        
		<h5>TITULO</h5>		

		<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. <a class="tooltip" href="#lorem_ipsum" onMouseOver="tooltip.pop(this, '#lorem_ipsum')">Lorem Ipsum</a> ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p><br>
        
        <p>Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos del latín, descubrió la fuente indudable. Lorem Ipsum viene de las...

CSS

body {
	width: 940px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-color: #EFEFEF;
}


/*------------------------------- //////////////// -------------------------------*/

.pestanas_textos div {
	width: 700px;
	height: 450px;
	margin-left: 240px;
	z-index: 5;
	position: absolute;
	top: 97px;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	overflow: scroll;
	overflow-x: hidden;
 }
 
.pestanas_textos h5 {
	font-size: 1.2em;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	text-indent: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
 }

.pestanas_textos p {
	font-size: 0.8em;
	font-family: Arial, Helvetica, sans-serif;
	color: ;#CE4646
	text-align: justify;
	line-height: 18px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	text-align: justify;
	padding-bottom: 5px;
	color: #000;
 }
	










/* For tooltip target element that has set class="tooltip" */
.tooltip {
	color: #00F;
	}
	
div#mcTooltip p {
	margin-top: -10px;
	}
	
div#mcTooltip img {
	float: right;
	margin-left: 5px;
	}

/*For tooltip box*/
div#mcTooltip {
	line-height:16px;
    border-width: 1px;   
    color:#333; 
    border-color:#BBBBBB;
    padding:20px;
    font-size: 12px;
    font-family: Verdana, Arial;
    border-radius:6px; /*Rounded corners. N/A for IE 8 and below.*/
    box-shadow: 0 1px 4px #AAAAAA; /*Drop shadow. N/A for IE 8 and below.*/
	}

div#mcTooltip, div.mcTooltipInner {
    background-color:#EAECF0;
	}

/* For hyperlink within tooltip */
div#mcTooltip a {
	color:#36c;
	}

/*Close button. Available when sticky or overlay has been set to true, or is on iPhone, iPad, Android, BlackBerry, or IEMobile devices. */
div#mcttCloseButton {
    width:14px;
	height:14px;
	position:absolute;
	background-image:url(closeBtn.gif);
	cursor:pointer; 
	overflow:hidden;
    top:12px; 
	right:12px; 
	left:auto;
	}            

/* Only applies when overlay has been set to true or 1...

JavaScript

var tooltipOptions=
{
    showDelay: 100,
    hideDelay: 300,
    effect: "fade",
    duration: 400,
    relativeTo: "element",
    position: 1,
    smartPosition: true,
    offsetX: 0,
    offsetY: 0,
    maxWidth: 400,
    calloutSize: 9,
    calloutPosition: 0.3,
    sticky: false,
    overlay: false,
    license: "64628"
};

/* JavaScript Tooltip v2013.7.8. Copyright www.menucool.com */
var tooltip=function(q){var j="length",Fb=function(a,c,b){if(a.addEventListener)a.addEventListener(c,b,false);else a.attachEvent&&a.attachEvent("on"+c,b)},b={},fb=function(a){if(a&&a.stopPropagation)a.stopPropagation();else window.event.cancelBubble=true},pb=function(d){var a=d.childNodes,c=[];if(a)for(var b=0,e=a.length;b<e;b++)a[b].nodeType==1&&c.push(a[b]);return c},O={a:0,b:0},g=null,Jb=function(a){if(!a)a=window.event;O.a=a.clientX;O.b=a.clientY},bb,Z,db=function(b,d){if(window.getComputedStyle)var c=window.getComputedStyle(b,null);else if(b.currentStyle)c=b.currentStyle;else c=b[a];return c[d]},t="offsetLeft",v="offsetTop",U="clientWidth",G="clientHeight",z="appendChild",N="createElement",R="getElementsByTagName",w="parentNode",L="calloutSize",B="position",rb="calloutPosition",W=function(){this.a=[];this.b=null},A="firstChild",ib=0,vb=document,o="getElementById",e=function(a,b){return b?vb[a](b):vb[a]},sb=function(){var c=50,b=navigator.userAgent,a;if((a=b.indexOf("MSIE "))!=-1)c=parseInt(b.substring(a+5,b.indexOf(".",a)));return c},wb=sb()<7,hb=sb()<9,Hb=navigator.userAgent.match(/(iPad|iPhone|iPod|Android|BlackBerry|IEMobile)/),u="marginTop",V="marginLeft";W.tx={c:function(a){return-Math.cos(a*Math.PI)/2+.5}};var r="offsetWidth",p="offsetHeight",m="documentElement",k="body",M="borderColor",eb="nextSibling",a="style",x="visibility",y="width",D="height",Lb=["$1$2$3","$1$2$3","$1$24","$1$23","$1$22"],ab,Nb;W.prototype={d:{a:q.duration,b:function(){},c:W.tx.c,tranFactor:1.5},e:function(h,d,g,c){for(var...