From 8ca534270c71ee06c78435ec6d04a50df9ec1bdb Mon Sep 17 00:00:00 2001
From: humano <humano@alien.cubil>
Date: Thu, 15 Nov 2018 17:05:45 -0500
Subject: [PATCH] autodocumentacion de campos

---
 css/style.css           |  86 ++++++---------------------------
 funciones/funciones.php | 103 +++++++++++++++++++++++++++++++++++-----
 2 files changed, 105 insertions(+), 84 deletions(-)

diff --git a/css/style.css b/css/style.css
index 2d2be97..bc4a450 100644
--- a/css/style.css
+++ b/css/style.css
@@ -674,79 +674,23 @@ div#contenedor_landingpage {
 /*-------------
 Help-tip Style
 ---------------*/
-.help-tip {
-  position: absolute;
-  top: -.2em; right: 1.1em;
-  //border: 1px solid red;
-}
-
-.help-tip::before { /*question sign*/
-  content: "?";
-  position: absolute;
-  top: 0; right: 0;
-  font-size: 1.2em;
-  padding: .1em .6em;
-  border-radius: 50%;
-  font-weight: bold;
-  cursor: help; 
-  background: #1565c0;
-  color: #f9f9f9;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-}
-
-.help-tip__content {
-  position: absolute;
-  top: 2.75em; right: -.2em;
-  min-width: 15em;
-  padding: .5em 1em;
-  background: rgba(31, 35, 39, 0.9);
-  color: #f9f9f9;
-  border-radius: .2em;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
-  z-index: 2;
-  transform-origin: 95% -1%;
-  transform: scale(0);
-  transition: transform .2s ease;
-}
-
-.help-tip__content::before { /*pointer of the help-tip*/
-  content: "";
-  position: absolute;
-  top: -1.35em; right: .6em; 
-  border: .7em solid transparent;
-  border-bottom-color: rgba(31, 35, 39, 0.9);
-}
-
-.help-tip__content::after { /*prevents help-tip from being hidden when mouse moves from the question sign down to the content*/
-  content: "";
-  position: absolute;
-  width: 60%;
-  min-height: 2em;
-  top: -2em; right: 0;
-  //background: red;
-}
-
-.help-tip:hover .help-tip__content,
-.help-tip:focus .help-tip__content{
-  transform: scale(1);
-}
 
 
-@supports(filter: drop-shadow(0 0 0 #ccc)) { /*for browsers that support filter: drop-shadow, we add it and remove box-shadow*/
-  
-  .help-tip__content {
-    box-shadow: none;
-    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .5));
-  }
-  
+/* CSS animation */
+
+@-webkit-keyframes fadeIn {
+    0% { 
+        opacity:0; 
+        transform: scale(0.6);
+    }
+
+    100% {
+        opacity:100%;
+        transform: scale(1);
+    }
 }
 
-@supports(display: flex) { /*for browsers that support display: flex*/
-  
-  .help-tip__content {
-    display: flex;
-    flex-flow: column;
-    flex-wrap: wrap;
-  }
-  
+@keyframes fadeIn {
+    0% { opacity:0; }
+    100% { opacity:100%; }
 }
diff --git a/funciones/funciones.php b/funciones/funciones.php
index c7e2174..354b533 100644
--- a/funciones/funciones.php
+++ b/funciones/funciones.php
@@ -7,12 +7,84 @@ use Firebase\JWT\JWT;
 function documentar($titulo,$descripcion,$id){
 	
 $resultado ="
-<div class='help-tip' role='tooltip' id='$id'>
-      <div class='help-tip__content'>
-        <h3 class='help-tip__title'>$titulo</h3>
-        <p class='help-tip__text'>$descripcion</p>
-      </div>
-</div>";
+<div class='help-tip-$id' role='tooltip' id='$id' >
+	<div>$titulo <i> <h3>$descripcion</h3></i></div>
+
+     
+</div>
+<style>
+.help-tip-$id{
+    position: absolute;
+    //top: 18px;
+    //right: 18px;
+    text-align: center;
+    background-color: #999999;
+    border-radius: 5 px;
+    width: 15px;
+    height: 15px;
+    font-size: 10px;
+    //line-height: 26px;
+    cursor: default;
+    z-index:20;
+}
+
+.help-tip-$id:before{
+    content:'?';
+    font-weight: bold;
+    color:#fff;
+    
+}
+
+
+.help-tip-$id:hover div{
+    display:block;
+    transform-origin: 100% 0%;
+
+    -webkit-animation: fadeIn 0.3s ease-in-out;
+    animation: fadeIn 0.3s ease-in-out;
+ z-index:22;
+}
+
+.help-tip-$id div{    /* The tooltip */
+    display: none;
+    text-align: left;
+    background-color: #1E2021;
+    padding: 20px;
+    width: 300px;
+    position: absolute;
+    border-radius: 3px;
+    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
+    //right: -4px;
+    color: #FFF;
+    font-size: 13px;
+    line-height: 1.4;
+    z-index:20;
+   
+}
+
+.help-tip-$id div:before{ /* The pointer of the tooltip */
+    position: absolute;
+    content: '';
+    width:0;
+    height: 0;
+    border:6px solid transparent;
+    border-bottom-color:#1E2021;
+   // right:10px;
+    top:-12px;
+}
+
+.help-tip-$id div:after{ /* Prevents the tooltip from being hidden */
+    width:100%;
+    height:40px;
+    content:'';
+    position: absolute;
+    top:-40px;
+    left:0;
+}
+
+</style>
+
+";
 return $resultado;
 	}
 
@@ -16603,10 +16675,10 @@ elseif($campo_tipo_accion == 'email'){$render = "
 			$remplace = preg_replace($regex,$sustitucion,$campos_valores[0]);
 			$remplace= "( $remplace )";
 			//$campos = print_r($matches,true);
-			//$documentar= documentar("el titulo","la descripcion","".$id_campo."[".$item."]");
+			
 			$render = "
 			<div class='input-group' >
-				<input title = '$campo_descripcion' type='text' value='$value'  id='".$id_campo."[".$item."]' name='".$id_campo."[".$item."]' class='form-control' placeholder='$campos_valores[0]' aria-describedby='".$id_campo."[".$item."]-tooltip'  readonly> 
+				<input title = '$campo_descripcion' type='text' value='$value'  id='".$id_campo."[".$item."]' name='".$id_campo."[".$item."]' class='form-control' placeholder='$campos_valores[0]'  readonly> 
 			<span class='input-group-btn'>
 			<div class='btn btn-warning' onclick=\"javascript: document.getElementById('".$id_campo."[".$item."]').value= eval($remplace); \">Calcular </div>
 			</span>
@@ -16788,18 +16860,22 @@ $boton= "		<div class='btn btn-primary btn-link'  onclick=\"xajax_campo_multiple
 
 	";*/
 }
-	if($item == 0) { $label = "<label class='label_formulario' for='$id_campo"."_".$item."' title='$id_campo'> <span class='text-$obligatorio'>$campo_nombre</span>  </label>";}
-				else {$label = "<label class=' label_formulario sr-only' for='$id_campo"."_".$item."'>$campo_nombre $campo_obligatorio</label>";}
+	if($item == 0) { $label = "<label class='label_formulario' for='$id_campo"."_".$item."' title='$id_campo' > <span class='text-$obligatorio'>$campo_nombre</span>  </label>";}
+				else {$label = "<label class=' label_formulario sr-only' for='$id_campo"."_".$item."' >$campo_nombre $campo_obligatorio</label>";}
 				///// CAMPOS QUE NO SE MOSTRARAN
 			//	if($campo_tipo_accion == 'imagen'){		$label="";		$campo_descripcion="";		}
 		if($cols =="") {$cols = "6";}
+		if($campo_descripcion !=""){
+		$documentar= documentar("$campo_nombre","$campo_descripcion","$id_campo");
+	}else{ $documentar="";}
+			
 		$input = "
 
 		<div class='col-md-$cols' style='$style'>
 			<div class='form-group ' id='input_".$id_campo."[".$item."]' >
-					$label
-				<div class='col-md-12' data-html='true' data-toggle='tooltip' data-placement='top' title='$campo_descripcion'>
-				$render
+					 $label 
+				<div class='col-md-12' data-html='true' data-toggle='tooltip' data-placement='top' title='$campo_descripcion'  >
+				$documentar $render
 				<small></small>
 				</div>
 			</div>
@@ -16809,6 +16885,7 @@ $boton= "		<div class='btn btn-primary btn-link'  onclick=\"xajax_campo_multiple
 		<div class='' id='multiple_id_campo_$id_campo"."_".$item."'>
 		<div id='boton_$id_campo'>$boton</div>
 		</div>
+		
 
 
 		";