Tooltip

Proporcionan información adicional al pasar el ratón por encima de algunos elementos. La información debe ser contextual, útil y breve. Se pueden colocar en la parte superior, inferior, izquierda o derecha del elemento trigger. La alineación del texto dentro del contenedor será siempre central

Variaciones y tipos

Diferenciamos tres tipos: Text, Text + icon y Text + CTA. Utilizaremos uno u otro en función de la acción que requiera.

Text

Demo en vivo

CenterAlign startAlign end
Bottom
Top
Slide-
<table>
  <tr>
    <th></th>
    <th>Center</th>
    <th>Align start</th>
    <th>Align end</th>
  </tr>
  <tr>
    <td>Bottom</td>
    <td>
      <button class="rds-tooltip rds-tooltip--bottom  rds-tooltip--hover" >
        <span class="rds-tooltip__text">Placeholder text</span>
        <span class="rds-icon-Faq" aria-hidden="true" ></span>
      </button>
    </td>
    <td>
      <button class="rds-tooltip rds-tooltip--bottom rds-tooltip--align-start  rds-tooltip--hover" >
        <span class="rds-tooltip__text">Placeholder text</span>
        <span class="rds-icon-Faq" aria-hidden="true" ></span>
      </button>
    </td>
    <td>
      <button class="rds-tooltip rds-tooltip--bottom rds-tooltip--align-end  rds-tooltip--hover" >
        <span class="rds-tooltip__text">Placeholder text</span>
        <span class="rds-icon-Faq" aria-hidden="true" ></span>
      </button>
    </td>
  </tr>
  <tr>
    <td>Top</td>
    <td>
      <button class="rds-tooltip rds-tooltip--top  rds-tooltip--hover" >
        <span class="rds-tooltip__text">Placeholder text</span>
        <span class="rds-icon-Faq" aria-hidden="true" ></span>
      </button>
    </td>
    <td>
      <button class="rds-tooltip rds-tooltip--top rds-tooltip--align-start  rds-tooltip--hover" >
        <span class="rds-tooltip__text">Placeholder text</span>
        <span class="rds-icon-Faq" aria-hidden="true" ></span>
      </button>
    </td>
    <td>
      <button class="rds-tooltip rds-tooltip--top rds-tooltip--align-end  rds-tooltip--hover" >
        <span class="rds-tooltip__text">Placeholder text</span>
        <span class="rds-icon-Faq" aria-hidden="true" ></span>
      </button>
    </td>
  </tr>
  <tr>
    <td>Slide</td>
    <td>-</td>
    <td>
      <button class="rds-tooltip rds-tooltip--left  rds-tooltip--hover" >
        <span class="rds-tooltip__text">Placeholder text</span>
        <span class="rds-icon-Faq" aria-hidden="true" ></span>
      </button>
    </td>
    <td>
      <button class="rds-tooltip rds-tooltip--right  rds-tooltip--hover" >
        <span class="rds-tooltip__text">Placeholder text</span>
        <span class="rds-icon-Faq" aria-hidden="true" ></span>
      </button>
    </td>
  </tr>
</table>

Text + icon

Tooltip formado por un título, una descripción y un icono de cerrar.

Demo en vivo

CenterAlign startAlign end
Bottom
Top
Slide-
<table>
  <tr>
    <th></th>
    <th>Center</th>
    <th>Align start</th>
    <th>Align end</th>
  </tr>
  <tr>
    <td>Bottom</td>
    <td>
      <button class="rds-tooltip rds-tooltip--bottom " data-rds-tooltip aria-expanded=false>
        <span class="rds-tooltip__text rds-tooltip__text--close"><span class="rds-icon-Close rds-tooltip__icon-close" role="button" aria-hidden="true" aria-label="Close tooltip" data-rds-tooltip-close tabindex="0"></span><p class="rds-title-2">Placeholder text</p><p>Placeholder text</p></span>
        <span class="rds-icon-Faq" aria-hidden="true" data-rds-tooltip-trigger></span>
      </button>
    </td>
    <td>
      <button class="rds-tooltip rds-tooltip--bottom rds-tooltip--align-start " data-rds-tooltip aria-expanded=false>
        <span class="rds-tooltip__text rds-tooltip__text--close"><span class="rds-icon-Close rds-tooltip__icon-close" role="button" aria-hidden="true" aria-label="Close tooltip" data-rds-tooltip-close tabindex="0"></span><p class="rds-title-2">Placeholder text</p><p>Placeholder text</p></span>
        <span class="rds-icon-Faq" aria-hidden="true" data-rds-tooltip-trigger></span>
      </button>
    </td>
    <td>
      <button class="rds-tooltip rds-tooltip--bottom rds-tooltip--align-end " data-rds-tooltip aria-expanded=false>
        <span class="rds-tooltip__text rds-tooltip__text--close"><span class="rds-icon-Close rds-tooltip__icon-close" role="button" aria-hidden="true" aria-label="Close tooltip" data-rds-tooltip-close tabindex="0"></span><p class="rds-title-2">Placeholder text</p><p>Placeholder text</p></span>
        <span class="rds-icon-Faq" aria-hidden="true" data-rds-tooltip-trigger></span>
      </button>
    </td>
  </tr>
  <tr>
    <td>Top</td>
    <td>
      <button class="rds-tooltip rds-tooltip--top " data-rds-tooltip aria-expanded=false>
        <span class="rds-tooltip__text rds-tooltip__text--close"><span class="rds-icon-Close rds-tooltip__icon-close" role="button" aria-hidden="true" aria-label="Close tooltip" data-rds-tooltip-close tabindex="0"></span><p class="rds-title-2">Placeholder text</p><p>Placeholder text</p></span>
        <span class="rds-icon-Faq" aria-hidden="true" data-rds-tooltip-trigger></span>
      </button>
    </td>
    <td>
      <button class="rds-tooltip rds-tooltip--top rds-tooltip--align-start " data-rds-tooltip aria-expanded=false>
        <span class="rds-tooltip__text rds-tooltip__text--close"><span class="rds-icon-Close rds-tooltip__icon-close" role="button" aria-hidden="true" aria-label="Close tooltip" data-rds-tooltip-close tabindex="0"></span><p class="rds-title-2">Placeholder text</p><p>Placeholder text</p></span>
        <span class="rds-icon-Faq" aria-hidden="true" data-rds-tooltip-trigger></span>
      </button>
    </td>
    <td>
      <button class="rds-tooltip rds-tooltip--top rds-tooltip--align-end " data-rds-tooltip aria-expanded=false>
        <span class="rds-tooltip__text rds-tooltip__text--close"><span class="rds-icon-Close rds-tooltip__icon-close" role="button" aria-hidden="true" aria-label="Close tooltip" data-rds-tooltip-close tabindex="0"></span><p class="rds-title-2">Placeholder text</p><p>Placeholder text</p></span>
        <span class="rds-icon-Faq" aria-hidden="true" data-rds-tooltip-trigger></span>
      </button>
    </td>
  </tr>
  <tr>
    <td>Slide</td>
    <td>-</td>
    <td>
      <button class="rds-tooltip rds-tooltip--left " data-rds-tooltip aria-expanded=false>
        <span class="rds-tooltip__text rds-tooltip__text--close"><span class="rds-icon-Close rds-tooltip__icon-close" role="button" aria-hidden="true" aria-label="Close tooltip" data-rds-tooltip-close tabindex="0"></span><p class="rds-title-2">Placeholder text</p><p>Placeholder text</p></span>
        <span class="rds-icon-Faq" aria-hidden="true" data-rds-tooltip-trigger></span>
      </button>
    </td>
    <td>
      <button class="rds-tooltip rds-tooltip--right " data-rds-tooltip aria-expanded=false>
        <span class="rds-tooltip__text rds-tooltip__text--close"><span class="rds-icon-Close rds-tooltip__icon-close" role="button" aria-hidden="true" aria-label="Close tooltip" data-rds-tooltip-close tabindex="0"></span><p class="rds-title-2">Placeholder text</p><p>Placeholder text</p></span>
        <span class="rds-icon-Faq" aria-hidden="true" data-rds-tooltip-trigger></span>
      </button>
    </td>
  </tr>
</table>

Text + CTA

Tooltip que incluye un CTA.

Demo en vivo

CenterAlign startAlign end
Bottom
Placeholder textText button
Placeholder textText button
Placeholder textText button
Top
Placeholder textText button
Placeholder textText button
Placeholder textText button
Slide-
Placeholder textText button
Placeholder textText button
<table>
  <tr>
    <th></th>
    <th>Center</th>
    <th>Align start</th>
    <th>Align end</th>
  </tr>
  <tr>
    <td>Bottom</td>
    <td>
      <div role="button" tabindex="0" class="rds-tooltip rds-tooltip--bottom rds-tooltip--with-inside-button  rds-tooltip--hover" >
        <span class="rds-tooltip__text">Placeholder text<a href="#" class="rds-btn rds-btn--secondary rds-btn--small rds-ml-c03">Text button</a></span>
        <span class="rds-icon-Faq" aria-hidden="true" ></span>
      </div>
    </td>
    <td>
      <div role="button" tabindex="0" class="rds-tooltip rds-tooltip--bottom rds-tooltip--align-start rds-tooltip--with-inside-button  rds-tooltip--hover" >
        <span class="rds-tooltip__text">Placeholder text<a href="#" class="rds-btn rds-btn--secondary rds-btn--small rds-ml-c03">Text button</a></span>
        <span class="rds-icon-Faq" aria-hidden="true" ></span>
      </div>
    </td>
    <td>
      <div role="button" tabindex="0" class="rds-tooltip rds-tooltip--bottom rds-tooltip--align-end rds-tooltip--with-inside-button  rds-tooltip--hover" >
        <span class="rds-tooltip__text">Placeholder text<a href="#" class="rds-btn rds-btn--secondary rds-btn--small rds-ml-c03">Text button</a></span>
        <span class="rds-icon-Faq" aria-hidden="true" ></span>
      </div>
    </td>
  </tr>
  <tr>
    <td>Top</td>
    <td>
      <div role="button" tabindex="0" class="rds-tooltip rds-tooltip--top rds-tooltip--with-inside-button  rds-tooltip--hover" >
        <span class="rds-tooltip__text">Placeholder text<a href="#" class="rds-btn rds-btn--secondary rds-btn--small rds-ml-c03">Text button</a></span>
        <span class="rds-icon-Faq" aria-hidden="true" ></span>
      </div>
    </td>
    <td>
      <div role="button" tabindex="0" class="rds-tooltip rds-tooltip--top rds-tooltip--align-start rds-tooltip--with-inside-button  rds-tooltip--hover" >
        <span class="rds-tooltip__text">Placeholder text<a href="#" class="rds-btn rds-btn--secondary rds-btn--small rds-ml-c03">Text button</a></span>
        <span class="rds-icon-Faq" aria-hidden="true" ></span>
      </div>
    </td>
    <td>
      <div role="button" tabindex="0" class="rds-tooltip rds-tooltip--top rds-tooltip--align-end rds-tooltip--with-inside-button  rds-tooltip--hover" >
        <span class="rds-tooltip__text">Placeholder text<a href="#" class="rds-btn rds-btn--secondary rds-btn--small rds-ml-c03">Text button</a></span>
        <span class="rds-icon-Faq" aria-hidden="true" ></span>
      </div>
    </td>
  </tr>
  <tr>
    <td>Slide</td>
    <td>-</td>
    <td>
      <div role="button" tabindex="0" class="rds-tooltip rds-tooltip--left rds-tooltip--with-inside-button  rds-tooltip--hover" >
        <span class="rds-tooltip__text">Placeholder text<a href="#" class="rds-btn rds-btn--secondary rds-btn--small rds-ml-c03">Text button</a></span>
        <span class="rds-icon-Faq" aria-hidden="true" ></span>
      </div>
    </td>
    <td>
      <div role="button" tabindex="0" class="rds-tooltip rds-tooltip--right rds-tooltip--with-inside-button  rds-tooltip--hover" >
        <span class="rds-tooltip__text">Placeholder text<a href="#" class="rds-btn rds-btn--secondary rds-btn--small rds-ml-c03">Text button</a></span>
        <span class="rds-icon-Faq" aria-hidden="true" ></span>
      </div>
    </td>
  </tr>
</table>

Comportamiento

Los tooltip deben cumplir unos principios básicos en su comportamiento:

  • Transitorio
    Aparecen en los estados hover o focus y desaparecen después de un breve período de tiempo.
  • Emparejado
    Se ubican siempre cerca del elemento con el que se asocian.
  • Conciso
    Solo incluyen textos cortos y descriptivos.

Alineación y orden

Asegurarse de no solapar el tooltip con el elemento trigger para evitar ocultar una parte o la totalidad del contenido.