{"id":262963,"date":"2022-12-23T11:14:00","date_gmt":"2022-12-23T08:14:00","guid":{"rendered":"https:\/\/inform.click\/creacion-de-informacion-sobre-herramientas-mediante-css\/"},"modified":"2022-12-23T11:20:00","modified_gmt":"2022-12-23T08:20:00","slug":"creacion-de-informacion-sobre-herramientas-mediante-css","status":"publish","type":"post","link":"https:\/\/inform.click\/es\/creacion-de-informacion-sobre-herramientas-mediante-css\/","title":{"rendered":"Creaci\u00f3n de informaci\u00f3n sobre herramientas mediante CSS"},"content":{"rendered":"

\n Probablemente ya sepa qu\u00e9 es una informaci\u00f3n sobre herramientas.\n<\/p>\n

\n Una informaci\u00f3n sobre herramientas es un icono o texto que, cuando se pasa el cursor sobre \u00e9l, nos brinda m\u00e1s informaci\u00f3n en una burbuja o ventana emergente.\n<\/p>\n

\n Normalmente encontrar\u00e1 informaci\u00f3n sobre herramientas en los formularios, pero puede colocarlos donde los usuarios requieran m\u00e1s informaci\u00f3n.\n<\/p>\n

\n En la imagen de arriba, el c\u00edrculo con el signo de interrogaci\u00f3n dentro muestra una informaci\u00f3n sobre herramientas<\/strong>. Cuando se pasa el cursor por encima, esta informaci\u00f3n sobre herramientas brinda m\u00e1s informaci\u00f3n sobre los tipos de caracteres que debe incluir su contrase\u00f1a.\n<\/p>\n

\n Puede obtener marcos para implementar informaci\u00f3n sobre herramientas en su sitio web, pero la mayor\u00eda de las veces, estos marcos usan JavaScript para lograr esto.\n<\/p>\n

\n En este art\u00edculo, aprenderemos c\u00f3mo crear informaci\u00f3n sobre herramientas usando solo CSS<\/strong> de una manera relativamente simple.\n<\/p>\n

\n Antes de comenzar, el archivo HTML y CSS final para implementar la informaci\u00f3n sobre herramientas est\u00e1 disponible al final de este blog<\/strong>. Hemos descrito en detalle todos y cada uno de los elementos utilizados en HTML y CSS para implementar la informaci\u00f3n sobre herramientas de la manera m\u00e1s f\u00e1cil posible.\n<\/p>\n

\n Podr\u00e1 implementar la funci\u00f3n de informaci\u00f3n sobre herramientas en cualquier sitio web usando solo HTML y CSS, despu\u00e9s de leer este art\u00edculo por completo.\n<\/p>\n

\n Vamos a empezar\u2026\n<\/p>\n

\n Comenzaremos creando una p\u00e1gina HTML simple que solicite una contrase\u00f1a.\n<\/p>\n

\n Paso 1: Creaci\u00f3n de una p\u00e1gina HTML simple para mostrar informaci\u00f3n sobre herramientas
\n<\/h5>\n

\n Aqu\u00ed est\u00e1 el c\u00f3digo HTML<\/strong> b\u00e1sico para la p\u00e1gina de formulario ,\n<\/p>\n

\n\n\n<\/code><\/pre>\n
<\/p>\n
\n<\/pre>\n
<br \/>\n  Awesome CSS Tooltip<br \/>\n<\/title><\/p>\n<pre>\n<\/pre>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<pre>\n\n\n<\/pre>\n<form>\n  <code><label>Password:<\/label> <input type=\"password\" \/> <span class=\"tooltip\">?<\/span><\/code><br \/>\n<\/form>\n<pre> \n\n<\/pre>\n<p>\n  <code>Como puede ver, hemos vinculado nuestro archivo \" <strong>style.css<\/strong> \" en el html anterior.<\/code>\n<\/p>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<p>\n  <code>Crearemos la informaci\u00f3n sobre herramientas utilizando este archivo CSS.<\/code>\n<\/p>\n<p>\n  <code>Usamos un <strong>formulario simple<\/strong> para probar la funci\u00f3n de informaci\u00f3n sobre herramientas. Este formulario solo tiene un campo etiquetado como \" <strong>Contrase\u00f1a<\/strong> \", ya que lo estamos usando solo para ilustrar c\u00f3mo funciona la informaci\u00f3n sobre herramientas.<\/code>\n<\/p>\n<form>\n  <code><label>Password:<\/label> <input type=\"password\" \/> <span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><br \/>\n<\/form>\n<pre> <\/pre>\n<p>\n  <code>Hemos utilizado la clase \" informaci\u00f3n sobre <strong>herramientas<\/strong> \" para implementar la funci\u00f3n de informaci\u00f3n sobre herramientas mediante CSS. Esto lo discutiremos en la pr\u00f3xima secci\u00f3n.<\/code>\n<\/p>\n<h5>\n  <code>Paso 2: Estilos CSS b\u00e1sicos para nuestra p\u00e1gina HTML<\/code><br \/>\n<\/h5>\n<p>\n  <code>Antes de crear el CSS para \"informaci\u00f3n sobre herramientas\", debemos crear algunos <strong>estilos CSS b\u00e1sicos para nuestra p\u00e1gina html<\/strong>.<\/code>\n<\/p>\n<pre><code><code>body{\nbackground: #4da73c;\ncolor: #fff;\nfont-family: verdana;\n}<\/code><\/code><\/pre>\n<p>\n  Esto dar\u00e1 una p\u00e1gina html con un bonito fondo verde. Tambi\u00e9n hemos seleccionado la fuente verdana y el color de la fuente como blanco.\n<\/p>\n<pre><code>form{\nposition: relative;\nwidth: 100%;\nmax-width: 600px;\nmargin: 20%auto;\n}<\/code><\/pre>\n<p>\n  Hemos posicionado el formulario \u00abrelativamente\u00bb, con un ancho m\u00e1ximo de 600 p\u00edxeles y un margen del 20%.\n<\/p>\n<pre><code>Formlabel{\nfont-size: 32px;\nletter-spacing: 1px;\n}<\/code><\/pre>\n<p>\n  La clase de etiqueta de formulario es para especificar el tama\u00f1o de fuente y el espacio entre letras para el texto de la etiqueta que usaremos.\n<\/p>\n<pre><code>forminput{\nmargin: 0 10px;\npadding: 8px 8px 6px;\nfont-size: 20px;\nborder: 0;\ncolor: #444;\n}<\/code><\/pre>\n<p>\n  Aqu\u00ed tenemos los estilos para el campo de formulario. No hay nada complicado en este estilo. Hemos proporcionado un <strong>margen<\/strong> y un <strong>relleno<\/strong> apropiados junto con la <strong>especificaci\u00f3n del tama\u00f1o<\/strong> y <strong>el color<\/strong> de la fuente para los campos del formulario.\n<\/p>\n<p>\n  Esos son nuestros estilos css predeterminados para nuestra p\u00e1gina de formulario que usaremos para demostrar c\u00f3mo implementar la funci\u00f3n de informaci\u00f3n sobre herramientas usando CSS.\n<\/p>\n<h3>\n  Vamos a crear informaci\u00f3n sobre herramientas usando CSS<br \/>\n<\/h3>\n<h5>\n  Paso 4: Estilo CSS para informaci\u00f3n sobre herramientas<br \/>\n<\/h5>\n<p>\n  Es posible que haya notado que hemos utilizado la clase \u00bb informaci\u00f3n sobre <strong>herramientas<\/strong> \u00bb en nuestro archivo html. Este es el estilo que vamos a aplicar para el signo de interrogaci\u00f3n (\u00ab?\u00bb) que actuar\u00e1 como nuestra informaci\u00f3n sobre herramientas.\n<\/p>\n<pre><code>.tooltip{\nposition: relative;\nbackground: rgba(0,0,0,0.3);\npadding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;\ncursor: help;\n}<\/code><\/pre>\n<p>\n  Primero tenemos que posicionar la informaci\u00f3n sobre herramientas relativamente aplicando \u00bb <strong>posici\u00f3n: relativa;<\/strong> \u00bb estilo. El motivo del posicionamiento relativo de la informaci\u00f3n sobre herramientas es que utilizaremos <strong>pseudoelementos<\/strong> m\u00e1s adelante en este m\u00e9todo que se pueden posicionar de forma \u00ababsoluta\u00bb. Entonces queremos que esas pseudoclases sean \u00ababsolutas\u00bb posicionadas relativamente a este elemento.\n<\/p>\n<p>\n  A continuaci\u00f3n, le damos un color de <strong>fondo negro<\/strong> a la informaci\u00f3n sobre herramientas usando el m\u00e9todo rgba(),\n<\/p>\n<p>\n  <code>background: rgba(0,0,0,0.3);<\/code>\n<\/p>\n<p>\n  en el que r, g, b significa rojo, verde y azul y a significa ‘ <strong>alfa<\/strong> ‘, que <strong>controla la opacidad<\/strong>.\n<\/p>\n<p>\n  Le daremos un fondo negro a nuestro c\u00edrculo de informaci\u00f3n sobre herramientas y reduciremos su opacidad a 0.3 para que parezca un <strong>color verde oscuro<\/strong>.\n<\/p>\n<p>\n  A continuaci\u00f3n, aplicaremos algunos estilos b\u00e1sicos de relleno y radio de borde al signo de interrogaci\u00f3n (\u00ab?\u00bb) para que nuestra informaci\u00f3n sobre herramientas se vea bien.\n<\/p>\n<pre><code>padding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;<\/code><\/pre>\n<p>\n  Con el CSS anterior, estamos aplicando relleno al c\u00edrculo que encierra el \u00ab?\u00bb, y haciendo que el radio del borde sea del 100 % para que sea un c\u00edrculo completo.\n<\/p>\n<p>\n  Tama\u00f1o de fuente determina el tama\u00f1o de \u00ab?\u00bb signo, que usamos como informaci\u00f3n sobre herramientas en este ejemplo.\n<\/p>\n<p>\n  Tambi\u00e9n estamos agregando \u00bb <strong>cursor:help;<\/strong> \u00bb en el CSS, aparecer\u00e1 un signo de interrogaci\u00f3n debajo del puntero del mouse cuando pase el mouse sobre ese elemento, como se muestra en la imagen a continuaci\u00f3n.\n<\/p>\n<p>\n  El toot-tip contiene algo de contenido (en este ejemplo, brindamos m\u00e1s informaci\u00f3n sobre los caracteres que deben incluirse en el campo \u00abcontrase\u00f1a\u00bb).\n<\/p>\n<h5>\n  Paso 5: Proporcione el contenido para informaci\u00f3n sobre herramientas dentro de HTML<br \/>\n<\/h5>\n<p>\n  El pr\u00f3ximo desaf\u00edo que tenemos ante nosotros es, \u00bfd\u00f3nde colocar este contenido dentro de la informaci\u00f3n sobre herramientas?\n<\/p>\n<p>\n  Para realizar esta tarea, agregaremos un <strong>atributo<\/strong> en el archivo HTML que creamos antes.\n<\/p>\n<pre><code><span class=\"tooltip\">?<\/span><\/code><\/pre>\n<p>\n  Aqu\u00ed, no queremos agregar ning\u00fan marcado adicional, como crear otro tramo para agregar el contenido dentro de la informaci\u00f3n sobre herramientas.\n<\/p>\n<p>\n  Podemos incluir el contenido de la informaci\u00f3n sobre herramientas dentro de este lapso.\n<\/p>\n<p>\n  Vamos a hacer esto agregando un atributo de \u00bb <strong>datos \u00ab.<\/strong> El nombre del atributo de datos aqu\u00ed ser\u00e1 \u00bb informaci\u00f3n sobre <strong>herramientas<\/strong> \u00ab.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"\">?<\/span><\/code><\/pre>\n<p>\n  <strong>data-tooltip<\/strong> es nuestro atributo de datos mediante el cual agregamos el contenido que debe mostrarse dentro de la informaci\u00f3n sobre herramientas.\n<\/p>\n<p>\n  A continuaci\u00f3n, agregaremos las instrucciones sobre el car\u00e1cter que debe estar presente en la contrase\u00f1a, dentro de nuestro atributo de informaci\u00f3n sobre herramientas de datos.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><\/pre>\n<p>\n  Ahora hemos <strong>agregado el texto<\/strong> que deber\u00eda aparecer dentro de la informaci\u00f3n sobre herramientas. A continuaci\u00f3n, aprenderemos c\u00f3mo <strong>hacer que este texto aparezca dentro de la informaci\u00f3n sobre herramientas<\/strong> cuando los usuarios pasen el cursor sobre el signo de interrogaci\u00f3n.\n<\/p>\n<h5>\n  Paso 6: crear un contenedor de informaci\u00f3n sobre herramientas utilizando pseudoelementos<br \/>\n<\/h5>\n<p>\n  Primero, necesitamos crear los contenedores dentro de los cuales se debe mostrar el contenido de la informaci\u00f3n sobre herramientas.\n<\/p>\n<p>\n  Para hacer esto, regresemos al archivo style.css y hagamos <strong>pseudo elementos<\/strong> para la clase <strong>.tooltip<\/strong>.\n<\/p>\n<p>\n  Vamos a crear <strong>pseudoclases ::after<\/strong> y <strong>::before<\/strong> para que aparezca el contenido de nuestra informaci\u00f3n sobre herramientas.\n<\/p>\n<p>\n  B\u00e1sicamente, al usar una pseudoclase como \u00bb <strong>::after<\/strong> \u00ab, puede apuntar a una posici\u00f3n justo despu\u00e9s del elemento que usa la clase principal y dise\u00f1ar esa posici\u00f3n.\n<\/p>\n<p>\n  De manera similar, al usar la pseudo clase ::before puede dise\u00f1ar la posici\u00f3n justo antes del elemento donde se usa la clase principal (en este caso, \u00ab?\u00bb es ese elemento).\n<\/p>\n<p>\n  Es una pseudoclase muy \u00fatil para inyectar contenido adicional en una p\u00e1gina.\n<\/p>\n<p>\n  Crearemos una pseudoclase para \u00abtootlip\u00bb como se muestra a continuaci\u00f3n.\n<\/p>\n<pre><code>.tooltip::before, .tooltip::after{\nposition: absolute;\nleft: 50%;\n}<\/code><\/pre>\n<p>\n  Estamos creando una clase com\u00fan para los estilos ::antes y ::despu\u00e9s.\n<\/p>\n<p>\n  Aqu\u00ed, hemos <strong>posicionado absolutamente<\/strong> los estilos ::antes y ::despu\u00e9s, porque queremos que est\u00e9n colocados sobre el ‘signo de interrogaci\u00f3n' y queremos que est\u00e9n centrados sobre \u00ab?\u00bb.\n<\/p>\n<p>\n  Para hacer que la informaci\u00f3n sobre herramientas est\u00e9 centrada sobre el \u00ab?\u00bb tenemos que usar el \u00bb <strong>left:50%;<\/strong> \u00bb atributo.\n<\/p>\n<p>\n  Ahora, vamos a usar <strong>::before<\/strong> para dise\u00f1ar el peque\u00f1o tri\u00e1ngulo en la parte inferior de nuestra informaci\u00f3n sobre herramientas.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-63845098b3ae1.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-63845098b3ae1.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  El <strong>::after<\/strong> se usa para dise\u00f1ar el contenido dentro de la informaci\u00f3n sobre herramientas.\n<\/p>\n<p>\n  Veamos c\u00f3mo se hace.\n<\/p>\n<p>\n  Primero crearemos el peque\u00f1o tri\u00e1ngulo en la parte inferior de la informaci\u00f3n sobre herramientas.\n<\/p>\n<pre><code>.tooltip::before{\ncontent: \"\";\nborder-width: 10px 8px 08px;\nborder-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;\ntop: -20px;\nmargin-left: -8px;\n}<\/code><\/pre>\n<p>\n  Deber\u00edamos usar <strong>contenido:\u00bb\u00bb;<\/strong> atributo para mostrar que este elemento no tiene contenido. Como hemos inyectado algo de <strong>contenido vac\u00edo<\/strong>, ahora podemos dise\u00f1arlo.\n<\/p>\n<p>\n  Podemos <strong>crear tri\u00e1ngulos en CSS<\/strong> usando el atributo <strong>border-width .<\/strong>\n<\/p>\n<p>\n  Por esta l\u00ednea,\n<\/p>\n<p>\n  <code>border-width: 10px 8px 08px;<\/code>\n<\/p>\n<p>\n  Hemos especificado que el ancho del borde en la parte superior es de 10 p\u00edxeles, el derecho es de 8 p\u00edxeles, el inferior de 0 p\u00edxeles y el izquierdo de 8 p\u00edxeles.\n<\/p>\n<p>\n  Esto va a crear un tri\u00e1ngulo para nosotros.\n<\/p>\n<p>\n  A continuaci\u00f3n, crearemos un <strong>borde s\u00f3lido<\/strong> para esta secci\u00f3n y <strong>haremos transparentes las \u00e1reas derecha, inferior e izquierda<\/strong>, de modo que solo se vea el \u00e1rea superior del \u00abtri\u00e1ngulo\u00bb.\n<\/p>\n<pre><code>border-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;<\/code><\/pre>\n<p>\n  Despu\u00e9s de hacer que el borde sea s\u00f3lido, estamos aplicando colores para los lados superior, derecho, inferior e izquierdo del borde.\n<\/p>\n<p>\n  Deber\u00edamos usar el mismo \u00bb <strong>border-color:rgba();<\/strong> \u00bb atributo aqu\u00ed, que usamos para dise\u00f1ar el c\u00edrculo alrededor del signo de interrogaci\u00f3n.\n<\/p>\n<p>\n  <code>border-color: rgba(0,0,0,0.3) transparent transparent transparent;<\/code>\n<\/p>\n<p>\n  Aqu\u00ed, le dimos <strong>color negro<\/strong> (0,0,0) a la <strong>parte superior<\/strong> del borde y <strong>redujimos su opacidad a 0.3<\/strong> para darnos un color verde oscuro, tal como lo hicimos para obtener el estilo del c\u00edrculo alrededor del \u00ab?\u00bb.\n<\/p>\n<p>\n  Ocultamos las partes <strong>derecha, inferior e izquierda<\/strong> del borde haciendo que el archivo sea <strong>transparente<\/strong>.\n<\/p>\n<p>\n  Incluso si hubi\u00e9ramos creado los bordes derecho e izquierdo, son transparentes. El \u00fanico borde con color es el borde superior. Lo que esto har\u00e1 es que el <strong>borde oculto a la izquierda y a la derecha nos dar\u00e1 un efecto de tri\u00e1ngulo junto con el borde superior coloreado<\/strong>.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-6384509cdcb55.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-6384509cdcb55.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  El resultado final se ver\u00e1 as\u00ed.\n<\/p>\n<p>\n  Si realiza una b\u00fasqueda en Google de \u00abi\u00bb, aprender\u00e1 m\u00e1s al respecto.\n<\/p>\n<p>\n  Los atributos \u00bb <strong>Margen izquierdo<\/strong> \u00bb y \u00bb <strong>superior<\/strong> \u00bb se utilizan para colocar este tri\u00e1ngulo centrado sobre el c\u00edrculo.\n<\/p>\n<pre><code>top: -20px;\nmargin-left: -8px;<\/code><\/pre>\n<p>\n  Ahora <strong>hemos creado la cola triangular<\/strong> en la parte inferior de nuestra informaci\u00f3n sobre herramientas, que apunta al \u00ab?\u00bb se\u00f1al.\n<\/p>\n<p>\n  A continuaci\u00f3n, debemos dise\u00f1ar la regi\u00f3n del rect\u00e1ngulo redondeado de la informaci\u00f3n sobre herramientas donde se muestra la informaci\u00f3n. Para esto, usaremos el atributo <strong>::after .<\/strong>\n<\/p>\n<pre><code>.tooltip::after{\ncontent: \"some text\";\nbackground: rgba(0,0,0,0.3);\ntop: -20px;\ntransform: translateY(-100%);\nfont-size: 14px;\nmargin-left: -150px;\nwidth: 300px;\nborder-radius: 10px;\ncolor: #fff;\npadding: 14px;\n}<\/code><\/pre>\n<p>\n  Por lo tanto, he usado,\n<\/p>\n<p>\n  <code>content: \"some text\";<\/code>\n<\/p>\n<p>\n  En la secci\u00f3n de apertura de la pseudo clase <strong>.tooltip::after<\/strong>\n<\/p>\n<p>\n  Ahora debemos darle a esta secci\u00f3n el <strong>mismo color de fondo<\/strong> que usamos para crear la regi\u00f3n del tri\u00e1ngulo (que es negro, con una opacidad alfa de 0.3).\n<\/p>\n<p>\n  As\u00ed que he a\u00f1adido,\n<\/p>\n<p>\n  <code>background: rgba(0,0,0,0.3);<\/code>\n<\/p>\n<p>\n  Luego he centrado este apartado con nuestro \u00absigno de interrogaci\u00f3n\u00bb, como antes. Estoy usando un ancho de 300 px para el cuadro de rect\u00e1ngulo redondeado y un margen de -150 px para centrarlo con respecto al signo de interrogaci\u00f3n.\n<\/p>\n<pre><code>top: -20px;\nwidth:300px;\nmargin-left: -150px;<\/code><\/pre>\n<p>\n  Ahora daremos relleno y haremos que los bordes del rect\u00e1ngulo sean redondeados (aplicando border-radius).\n<\/p>\n<pre><code>border-radius: 10px;\ncolor: #fff;\npadding: 14px;<\/code><\/pre>\n<p>\n  Esto tambi\u00e9n establecer\u00e1 el color del texto dentro del rect\u00e1ngulo redondeado como blanco (#fff).\n<\/p>\n<p>\n  Ahora la regi\u00f3n del rect\u00e1ngulo redondeado que muestra el contenido est\u00e1 lista. Pero, sin embargo, no est\u00e1 <strong>bien posicionado<\/strong>. La p\u00e1gina HTML actual se ver\u00e1 como algo que se muestra a continuaci\u00f3n.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a14de27.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a14de27.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  B\u00e1sicamente, el rect\u00e1ngulo redondeado se <strong>superpone sobre la regi\u00f3n del \u00abtri\u00e1ngulo\u00bb<\/strong> que hab\u00edamos creado, ya que tanto el ::antes como el ::despu\u00e9s usan el mismo margen y se colocan 20 p\u00edxeles por encima del signo de interrogaci\u00f3n.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a5b5601.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a5b5601.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Necesitamos <strong>traer el cuadro de rect\u00e1ngulo redondeado justo encima de la secci\u00f3n triangular<\/strong> que creamos anteriormente, para que ambos juntos aparezcan como un <strong>cuadro de chat<\/strong>.\n<\/p>\n<p>\n  No sabemos cu\u00e1l es la altura exacta del rect\u00e1ngulo redondeado para colocarlo justo encima del tri\u00e1ngulo, lo que queremos es <strong>transformar el 100% de la altura del rect\u00e1ngulo redondeado verticalmente<\/strong> para que quede justo encima del tri\u00e1ngulo.\n<\/p>\n<p>\n  Dado que ambos elementos (tri\u00e1ngulo y rect\u00e1ngulo redondeado) se usan <code>top: -20px;<\/code>, solo necesitamos <strong>transformar la parte superior del rect\u00e1ngulo redondeado verticalmente a una altura de p\u00edxel<\/strong> igual a su propia altura.\n<\/p>\n<p>\n  Para esto usamos,<code>transform: translateY(-100%);<\/code>\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aa31713.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aa31713.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Ahora tenemos una estructura adecuada que parece un cuadro de informaci\u00f3n.\n<\/p>\n<h5>\n  Paso 7: obtener la informaci\u00f3n real dentro de la informaci\u00f3n sobre herramientas<br \/>\n<\/h5>\n<p>\n  Nuestro desaf\u00edo final aqu\u00ed es obtener el contenido correcto, que contiene m\u00e1s informaci\u00f3n, dentro de la informaci\u00f3n sobre herramientas.\n<\/p>\n<p>\n  Recuerde que hab\u00edamos colocado el contenido que deber\u00eda aparecer dentro de la informaci\u00f3n sobre herramientas en nuestro archivo HTML.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><\/pre>\n<p>\n  Usando CSS podemos tomar un atributo del elemento HTML. Vamos a hacer eso usando <strong>attr()<\/strong> en <strong>.tooltip::after<\/strong> pseudo CSS.\n<\/p>\n<p>\n  Entonces, en lugar de,<code>content: \"some text\";<\/code>\n<\/p>\n<p>\n  vamos a usar<code>content: attr(data-tooltip);<\/code>\n<\/p>\n<p>\n  Aqu\u00ed, \u00bb <strong>informaci\u00f3n sobre herramientas de datos<\/strong> \u00bb es nuestro atributo HTML.\n<\/p>\n<p>\n  Usando el atributo que le dimos al contenido en HTML, podremos llamar a ese contenido y mostrarlo dentro de nuestro pseudo CSS. El resultado de esto ser\u00e1 como se muestra a continuaci\u00f3n,\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aed4573.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aed4573.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Ahora. todo lo que tenemos que hacer es hacer que nuestra informaci\u00f3n sobre herramientas sea invisible al principio y aparezca solo cuando los usuarios pasen el cursor sobre el signo de interrogaci\u00f3n (?).\n<\/p>\n<p>\n  Esto es muy f\u00e1cil de hacer.\n<\/p>\n<p>\n  Para hacer que la informaci\u00f3n sobre herramientas sea invisible al principio, haremos <strong>que su opacidad sea \u00ab0\u00bb<\/strong> en el siguiente pseudo CSS que hemos escrito antes.\n<\/p>\n<pre><code>.tooltip::before .tooltip::after{\nposition: absolute;\nleft: 50%;\nopacity: 0;\n}<\/code><\/pre>\n<p>\n  Para el efecto Hover agregaremos un nuevo pseudo CSS en la parte inferior de nuestro archivo style.css. Hagamos <strong>que la opacidad sea \u00ab1\u00bb para el estado flotante<\/strong> para que la informaci\u00f3n sobre herramientas se muestre solo al pasar el mouse.\n<\/p>\n<pre><code>\/* CSS for Hover effects *\/\n \ntooltip:hover::before.tooltip:hover::after{\nOpacity:1;\n}<\/code><\/pre>\n<p>\n  Este pseudo CSS solo determina el estado flotante, ya que hemos usado \u00ab: hover\u00bb despu\u00e9s del CSS principal .tooltip\n<\/p>\n<p>\n  Ahora nuestra informaci\u00f3n sobre herramientas de CSS est\u00e1 lista.\n<\/p>\n<p>\n  Pero la transici\u00f3n de la informaci\u00f3n sobre herramientas no ser\u00e1 tan fluida como cabr\u00eda esperar.\n<\/p>\n<p>\n  Puede hacer que los efectos de transici\u00f3n sean a\u00fan mejores usando CSS. Para esto, solo tiene que agregar la siguiente regla de transici\u00f3n en CSS para las pseudoclases ::before y ::after.\n<\/p>\n<p>\n  Para saber m\u00e1s sobre los estilos de transici\u00f3n que se pueden hacer usando CSS, lea nuestro art\u00edculo \u00bb <a href=\"https:\/\/inform.click\/es\/haga-que-sus-paginas-web-cobren-vida-con-animaciones-y-transiciones-css\/\" title=\"Animaciones y transiciones CSS\">Animaciones y transiciones CSS<\/a> \u00ab.\n<\/p>\n<pre><code>.tooltip::before.tooltip::after {\ntransition: all ease 0.3s;\n}<\/code><\/pre>\n<p>\n  Este proceso es mucho m\u00e1s f\u00e1cil y menos complicado en comparaci\u00f3n con la implementaci\u00f3n de la informaci\u00f3n sobre herramientas mediante JavaScript.\n<\/p>\n<p>\n  Para su referencia, busque el archivo HTML y CSS final para practicar esto.\n<\/p>\n<h4>\n  Archivo HTML final para probar la informaci\u00f3n sobre herramientas<br \/>\n<\/h4>\n<pre><code>\n\n\n<\/code><\/pre>\n<p><meta charset=\"utf-8\" \/><\/p>\n<pre>\n<\/pre>\n<p><title><br \/>\n  CSS Tooltip<br \/>\n<\/title><\/p>\n<pre>\n<\/pre>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<pre>\n\n\n<\/pre>\n<form>\n  <code><label>Password:<\/label> <input type=\"password\" \/> <span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><br \/>\n<\/form>\n<pre> \n\n<\/pre>\n<h4>\n  <code>Archivo CSS final Creaci\u00f3n de informaci\u00f3n sobre herramientas<\/code><br \/>\n<\/h4>\n<pre><code><code>body{\nbackground: #4da73c;\ncolor: #fff;\nfont-family: verdana;\n}\n \nform{\nposition: relative;\nwidth: 100%;\nmax-width: 600px;\nmargin: 20%auto;\n}\n \nformlabel{\nfont-size: 32px;\nletter-spacing: 1px;\n}\n \nforminput{\nmargin: 010px;\npadding: 8px 8px 6px;\nfont-size: 20px;\nborder: 0;\ncolor: #fff;\n}\n \n\/* --------- Tooltip Styles ---------- *\/\n \n.tooltip{\nposition: relative;\nbackground: rgba(0,0,0,0.3);\npadding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;\ncursor: help;\n}\n.tooltip::before, .tooltip::after{\nposition: absolute;\nleft: 50%;\nopacity: 0;\ntransition: allease0.3s;\n}\n.tooltip::before{\ncontent: \"\";\nborder-width: 10px 8px 08px;\nborder-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;\ntop: -20px;\nmargin-left: -8px;\n}\n.tooltip::after{\ncontent: attr(data-tooltip);\nbackground: rgba(0,0,0,0.3);\ntop: -20px;\ntransform: translateY(-100%);\nfont-size: 14px;\nmargin-left: -150px;\nwidth: 300px;\nborder-radius: 10px;\ncolor: #fff;\npadding: 14px;\n}\n \n\/* Hover states *\/\n \n.tooltip:hover::before, .tooltip:hover::after{\nopacity: 1;\n}<\/code><\/code><\/pre>\n<h3>\n  Demo en vivo<br \/>\n<\/h3>\n<p>\n  Vea la informaci\u00f3n sobre herramientas de <a href=\"http:\/\/www.instantshift.com\/demo\/css-tooltip\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a> en vivo en acci\u00f3n.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Fuente de grabaci\u00f3n: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2018\/05\/11\/create-tooltip-using-css\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Probablemente ya sepa qu\u00e9 es una informaci\u00f3n sobre herramientas. Una informaci\u00f3n sobre herramientas es un icono o texto que, cuando se pasa el cursor sobre \u00e9l, nos brinda m\u00e1s informaci\u00f3n en una burbuja o ventana emergente. Normalmente encontrar\u00e1 informaci\u00f3n sobre herramientas en los formularios, pero puede colocarlos donde los usuarios requieran m\u00e1s informaci\u00f3n. En la imagen de arriba, el c\u00edrculo con el signo de interrogaci\u00f3n dentro muestra una informaci\u00f3n sobre herramientas. Cuando se pasa el cursor por encima, esta informaci\u00f3n sobre herramientas brinda m\u00e1s informaci\u00f3n sobre los tipos de caracteres que debe incluir su contrase\u00f1a. Puede obtener marcos para implementar informaci\u00f3n sobre herramientas en su sitio web, pero la mayor\u00eda de las veces, estos marcos usan JavaScript para lograr esto. En esto \u2026<\/p>\n","protected":false},"author":1,"featured_media":223378,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[73,125,60],"tags":[],"class_list":["post-262963","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-2","category-herramientas-web","category-web-y-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts\/262963","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/comments?post=262963"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts\/262963\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/media\/223378"}],"wp:attachment":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/media?parent=262963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/categories?post=262963"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/tags?post=262963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}