{"id":1416,"date":"2024-08-01T19:51:24","date_gmt":"2024-08-01T17:51:24","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1416"},"modified":"2024-08-01T19:51:25","modified_gmt":"2024-08-01T17:51:25","slug":"13-tooltip-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-avanzado\/13-tooltip-css\/","title":{"rendered":"13. Tooltip CSS"},"content":{"rendered":"\n

Un Tooltip<\/strong> se usa a menudo para especificar informaci\u00f3n adicional sobre algo cuando el usuario mueve el puntero del mouse sobre un elemento.<\/p>\n\n\n\n\n\n\n\n

Tooltip b\u00e1sico<\/h2>\n\n\n\n

Crea una informaci\u00f3n sobre herramientas que aparece cuando el usuario mueve el mouse sobre un elemento.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<!DOCTYPE html>
<html lang=\"es\">
  <head>
    <style>
      .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
      }

      .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;

        \/* POSICION DEL TOOLTIP *\/
        position: absolute;
        z-index: 1;
      }

      .tooltip:hover .tooltiptext {
        visibility: visible;
      }
    <\/style>
  <\/head>
  <body style=\"text-align: center\">
    <h2>Tooltip b\u00e1sico<\/h2>
    <div class=\"tooltip\">
      Situate sobre m\u00ed
      <span class=\"tooltiptext\">Tooltip text<\/span>
    <\/div>

    <p>
      Ten en cuenta que la posici\u00f3n del texto de informaci\u00f3n sobre herramientas
      no es muy buena. Vuelve al tutorial y contin\u00faa leyendo sobre c\u00f3mo colocar
      el Tooltip de una manera deseable.
    <\/p>
  <\/body>
<\/html><\/pre>\n\n\n\n
Ejm explicado:<\/h2>\n\n\n\n
    \n
  • HTML<\/strong>: usamos un contenedor, como un elemento <div><\/em><\/strong> y la clase tooltip<\/em><\/strong>. Cuando un usuario se mueve sobre el div<\/strong>, mostrar\u00e1 el texto del tooltip<\/strong>. El texto ser\u00e1 colocado dentro de un elemento en l\u00ednea, como un <span><\/em><\/strong> con la clase tooltiptext<\/em><\/strong>.<\/li>\n\n\n\n
  • CSS<\/strong>: La clase tooltip<\/em> <\/strong>usa position: relative<\/em><\/strong>, que es necesaria para colocar el texto de informaci\u00f3n sobre herramientas (position: absolute<\/em><\/strong>).<\/li>\n\n\n\n
  • La clase tooltiptext<\/em> <\/strong>contiene el texto del tooltip<\/strong>. Est\u00e1 oculto de forma predeterminada y ser\u00e1 visible al pasar el mouse por encima. Tambi\u00e9n le hemos agregado algunos estilos b\u00e1sicos: 120 px de ancho, color de fondo negro, color de texto blanco, texto centrado y relleno superior e inferior de 5 px.<\/li>\n\n\n\n
  • La propiedad border-radius<\/em><\/strong> es usada para redondear las esquinas al texto del tooltip<\/strong><\/li>\n\n\n\n
  • El selector :hover<\/em> <\/strong>es usado para mostrar el texto del tooltip<\/strong> cuando el usuario mueve el rat\u00f3n sobre el elemento <div> con class: tooltip;<\/em><\/strong><\/li>\n<\/ul>\n\n\n\n
    Posicionando tooltips<\/h2>\n\n\n\n
    En este ejemplo, el se coloca a la derecha (izquierda: 105 %) del texto \u00absobre el que se puede desplazar\u00bb (<div><\/em><\/strong>). Tambi\u00e9n ten en cuenta que top:-5px se usa para colocarlo en el medio de su elemento contenedor. Usamos el n\u00famero 5 porque el texto de informaci\u00f3n sobre herramientas tiene un relleno superior e inferior de 5px. Si aumentas su relleno, tambi\u00e9n aumente el valor de la propiedad superior para asegurarse de que permanezca en el medio (si es algo que deseas). Lo mismo se aplica si deseas que la informaci\u00f3n sobre herramientas se coloque a la izquierda.<\/p>\n\n\n\n
    Ejm de tooltip a la derecha<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>
    <html>
      <style>
        .tooltip {
          position: relative;
          display: inline-block;
          border-bottom: 1px dotted black;
        }

        .tooltip .tooltiptext {
          visibility: hidden;
          width: 120px;
          background-color: black;
          color: #fff;
          text-align: center;
          border-radius: 6px;
          padding: 5px 0;

          \/* Position the tooltip *\/
          position: absolute;
          z-index: 1;
          top: -5px;
          left: 105%;
        }

        .tooltip:hover .tooltiptext {
          visibility: visible;
        }
      <\/style>
      <body style=\"text-align: center\">
        <h2>Right Tooltip<\/h2>
        <p>Move the mouse over the text below:<\/p>

        <div class=\"tooltip\">
          Hover over me
          <span class=\"tooltiptext\">Tooltip text<\/span>
        <\/div>
      <\/body>
    <\/html><\/pre>\n\n\n\n
    Ejm de tooltip a la izquierda<\/strong><\/p>\n\n\n\n
    .tooltip .tooltiptext {\n  top: -5px;\n  right: 105%;\n}<\/pre>\n\n\n\n
    Si deseas que la informaci\u00f3n sobre el tooltip aparezca en la parte superior o inferior, consulta los ejemplos a continuaci\u00f3n. Ten en cuenta que usamos la propiedad margin-left<\/em><\/strong> con un valor de menos 60 p\u00edxeles. Esto es para centrar el tooltip arriba\/abajo del texto que se puede desplazar. Se establece en la mitad del ancho del tooltip (120\/2 = 60).<\/p>\n\n\n\n
    Ejemplo de tooltip top (arriba)<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>
    <html>
      <style>
        .tooltip {
          position: relative;
          display: inline-block;
          border-bottom: 1px dotted black;
        }

        .tooltip .tooltiptext {
          visibility: hidden;
          width: 120px;
          background-color: black;
          color: #fff;
          text-align: center;
          border-radius: 6px;
          padding: 5px 0;

          \/* Position the tooltip *\/
          position: absolute;
          z-index: 1;
          bottom: 100%;
          left: 50%;
          margin-left: -60px;
        }

        .tooltip:hover .tooltiptext {
          visibility: visible;
        }
      <\/style>
      <body style=\"text-align: center\">
        <h2>Top Tooltip<\/h2>
        <p>Move the mouse over the text below:<\/p>

        <div class=\"tooltip\">
          Hover over me
          <span class=\"tooltiptext\">Tooltip text<\/span>
        <\/div>
      <\/body>
    <\/html><\/pre>\n\n\n\n
    Ejemplo de tooltip bottom (abajo)<\/strong><\/p>\n\n\n\n
    .tooltip .tooltiptext {\n  width: 120px;\n  top: 100%;\n  left: 50%;\n  margin-left: -60px; \/* Use half of the width (120\/2 = 60), to center the tooltip *\/\n}<\/pre>\n\n\n\n
    Flechas tooltip<\/h2>\n\n\n\n
    Flecha abajo<\/h3>\n\n\n\n
    Para crear una flecha que deber\u00eda aparecer desde un lado espec\u00edfico de la informaci\u00f3n sobre tooltip, agrega content \u00abempty\u00bb despu\u00e9s del tooltip, con la clase de pseudoelemento ::after<\/em> <\/strong>junto con la propiedad content<\/em><\/strong>. La flecha en s\u00ed se crea usando bordes. Esto har\u00e1 que la informaci\u00f3n sobre herramientas se vea como una burbuja de di\u00e1logo.<\/p>\n\n\n\n
    <!DOCTYPE html>
    <html>
      <style>
        .tooltip {
          position: relative;
          display: inline-block;
          border-bottom: 1px dotted black;
        }

        .tooltip .tooltiptext {
          visibility: hidden;
          width: 120px;
          background-color: black;
          color: #fff;
          text-align: center;
          border-radius: 6px;
          padding: 5px 0;
          position: absolute;
          z-index: 1;
          bottom: 150%;
          left: 50%;
          margin-left: -60px;
        }

        .tooltip .tooltiptext::after {
          content: \"\";
          position: absolute;
          top: 100%;
          left: 50%;
          margin-left: -5px;
          border-width: 5px;
          border-style: solid;
          border-color: black transparent transparent transparent;
        }

        .tooltip:hover .tooltiptext {
          visibility: visible;
        }
      <\/style>
      <body style=\"text-align: center\">
        <h2>Top Tooltip w\/ Bottom Arrow<\/h2>

        <div class=\"tooltip\">
          Hover over me
          <span class=\"tooltiptext\">Tooltip text<\/span>
        <\/div>
      <\/body>
    <\/html><\/pre>\n\n\n\n
    Ejemplo explicado<\/h3>\n\n\n\n
    Coloca la flecha dentro del tooltip: arriba: 100% colocar\u00e1 la flecha en la parte inferior del tooltip. izquierda: 50% centrar\u00e1 la flecha.<\/p>\n\n\n\n
    \n
    Nota<\/strong>: La propiedad border-width<\/em><\/strong> especifica el tama\u00f1o de la flecha. Si cambias esto, tambi\u00e9n cambia el valor del margen izquierdo al mismo. Esto mantendr\u00e1 la flecha centrada.<\/p>\n<\/blockquote>\n\n\n\n
    border-color<\/em><\/strong> se usa para transformar el contenido en una flecha. Establecemos el borde superior en negro y el resto en transparente. Si todos los lados fueran negros, terminar\u00edas con una caja cuadrada negra.<\/p>\n\n\n\n
    Flecha arriba<\/h3>\n\n\n\n
    .tooltip .tooltiptext::after {\n  content: \" \";\n  position: absolute;\n  bottom: 100%;  \/* At the top of the tooltip *\/\n  left: 50%;\n  margin-left: -5px;\n  border-width: 5px;\n  border-style: solid;\n  border-color: transparent transparent black transparent;\n}<\/pre>\n\n\n\n
    Flecha a la izquierda<\/h3>\n\n\n\n
    .tooltip .tooltiptext::after {\n  content: \" \";\n  position: absolute;\n  top: 50%;\n  right: 100%; \/* To the left of the tooltip *\/\n  margin-top: -5px;\n  border-width: 5px;\n  border-style: solid;\n  border-color: transparent black transparent transparent;\n}<\/pre>\n\n\n\n
    Flecha a la derecha<\/h3>\n\n\n\n
    .tooltip .tooltiptext::after {\n  content: \" \";\n  position: absolute;\n  top: 50%;\n  left: 100%; \/* To the right of the tooltip *\/\n  margin-top: -5px;\n  border-width: 5px;\n  border-style: solid;\n  border-color: transparent transparent transparent black;\n}<\/pre>\n\n\n\n
    Fade in tooltips<\/h2>\n\n\n\n
    Si deseas que el tooltip se desvanezca cuando est\u00e9 a punto de ser visible, puedes usar la propiedad transition<\/em> <\/strong>junto con la propiedad opacity<\/em><\/strong>, y pasar de ser completamente invisible a 100% visible, en una cantidad de segundos espec\u00edficos (1 segundo en nuestro ejemplo).<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>
    <html>
      <style>
        .tooltip {
          position: relative;
          display: inline-block;
          border-bottom: 1px dotted black;
        }

        .tooltip .tooltiptext {
          visibility: hidden;
          width: 120px;
          background-color: black;
          color: #fff;
          text-align: center;
          border-radius: 6px;
          padding: 5px 0;
          position: absolute;
          z-index: 1;
          bottom: 100%;
          left: 50%;
          margin-left: -60px;

          \/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: *\/
          opacity: 0;
          transition: opacity 1s;
        }

        .tooltip:hover .tooltiptext {
          visibility: visible;
          opacity: 1;
        }
      <\/style>
      <body style=\"text-align: center\">
        <h2>Fade In Tooltip on Hover<\/h2>
        <p>
          When you move the mouse over the text below, the tooltip text will fade in
          and take 1 second to go from completely invisible to visible.
        <\/p>

        <div class=\"tooltip\">
          Hover over me
          <span class=\"tooltiptext\">Tooltip text<\/span>
        <\/div>
      <\/body>
    <\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
    Un Tooltip se usa a menudo para especificar informaci\u00f3n adicional sobre algo cuando el usuario mueve el puntero del mouse […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1367,"menu_order":12,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1416","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Un Tooltip se usa a menudo para especificar informaci\u00f3n adicional sobre algo cuando el usuario mueve el puntero del mouse […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1416","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1416"}],"version-history":[{"count":3,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1416\/revisions"}],"predecessor-version":[{"id":1419,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1416\/revisions\/1419"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1367"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}