Estilos

Componentes

Formularios

Organismos

Tooltip

Los tooltip muestran ayuda contextual o información sobre componentes específicos cuando un usuario se desplaza o se enfoca en ellos.

Si quieres conocer las buenas prácticas de uso del componente, puedes visitar el siguiente enlace.

Con botones

//SUPERIOR
<span
  data-direction="top-right"
  data-tooltip='Esta es la descripción de un tooltip "arriba-derecha".'
  tabindex="0"
>
  <button type="button" class="btn btn-primary btn-icon" aria-label="Botón">
    <span class="material-symbols-rounded o-icon" aria-hidden="true">turn_right</span>
  </button>
</span>
<span
  data-direction="top"
  data-tooltip='Esta es la descripción de un tooltip "arriba".'
  tabindex="0"
>
  <button type="button" class="btn btn-primary btn-icon" aria-label="Botón">
    <span class="material-symbols-rounded o-icon" aria-hidden="true">arrow_upward</span>
  </button>
</span>
<span
  data-direction="top-left"
  data-tooltip='Esta es la descripción de un tooltip "arriba-izquierda".'
  tabindex="0"
>
  <button type="button" class="btn btn-primary btn-icon" aria-label="Botón">
    <span class="material-symbols-rounded o-icon" aria-hidden="true">turn_left</span>
  </button>
</span>

//DERECHA
<span
  data-direction="right-bottom"
  data-tooltip='Esta es la descripción de un tooltip "derecha-abajo".'
  tabindex="0"
>
  <button
    type="button"
    class="btn btn-primary btn-icon"
    aria-label="Botón"
  >
    <span class="material-symbols-rounded o-icon" aria-hidden="true">south_east</span>
  </button>
</span>
<span
  data-direction="right"
  data-tooltip='Esta es la descripción de un tooltip "derecha".'
  tabindex="0"
>
  <button
    type="button"
    class="btn btn-primary btn-icon"
    aria-label="Botón"
  >
    <span class="material-symbols-rounded o-icon" aria-hidden="true">arrow_forward</span>
  </button>
</span>
<span
  data-direction="right-top"
  data-tooltip='Esta es la descripción de un tooltip "derecha-arriba".'
  tabindex="0"
>
  <button
    type="button"
    class="btn btn-primary btn-icon"
    aria-label="Botón"
  >
    <span class="material-symbols-rounded o-icon" aria-hidden="true">north_east</span>
  </button>
</span>


//IZQUIERDA
<span
  data-direction="left-bottom"
  data-tooltip='Esta es la descripción de un tooltip "izquierda-abajo".'
  tabindex="0"
>
  <button
    type="button"
    class="btn btn-primary btn-icon"
    aria-label="Botón"
  >
    <span class="material-symbols-rounded o-icon" aria-hidden="true">south_west</span>
  </button>
</span>
<span
  data-direction="left"
  data-tooltip='Esta es la descripción de un tooltip "izquierda".'
  tabindex="0"
>
  <button
    type="button"
    class="btn btn-primary btn-icon"
    aria-label="Botón"
  >
    <span class="material-symbols-rounded o-icon" aria-hidden="true">keyboard_backspace</span>
  </button>
</span>
<span
  data-direction="left-top"
  data-tooltip='Esta es la descripción de un tooltip "izquierda-arriba".'
  tabindex="0"
>
  <button
    type="button"
    class="btn btn-primary btn-icon"
    aria-label="Botón"
  >
    <span class="material-symbols-rounded o-icon" aria-hidden="true">north_west</span>
  </button>
</span>


//INFERIOR
<span
  data-direction="bottom-right"
  data-tooltip='Esta es la descripción de un tooltip "abajo-derecha".'
  tabindex="0"
>
  <button type="button" class="btn btn-primary btn-icon" aria-label="Botón">
    <span class="material-symbols-rounded o-icon" aria-hidden="true">subdirectory_arrow_right</span>
  </button>
</span>
<span
  data-direction="bottom"
  data-tooltip='Esta es la descripción de un tooltip "abajo".'
  tabindex="0"
>
  <button type="button" class="btn btn-primary btn-icon" aria-label="Botón">
    <span class="material-symbols-rounded o-icon" aria-hidden="true">arrow_downward</span>
  </button>
</span>
<span
  data-direction="bottom-left"
  data-tooltip='Esta es la descripción de un tooltip "abajo-izquierda".'
  tabindex="0"
>
  <button type="button" class="btn btn-primary btn-icon" aria-label="Botón">
    <span class="material-symbols-rounded o-icon" aria-hidden="true">subdirectory_arrow_left</span>
  </button>
</span>

Con iconos

//SUPERIOR
<span
  data-direction="top-right"
  data-tooltip='Esta es la descripción de un tooltip "arriba-derecha".'
  class="icon-box bg-light"
  tabindex="0"
>
  <span class="material-symbols-rounded o-icon" aria-hidden="true">help</span>
</span>
<span
  data-direction="top"
  data-tooltip='Esta es la descripción de un tooltip "arriba".'
  class="icon-box bg-light"
  tabindex="0"
>
  <span class="material-symbols-rounded o-icon" aria-hidden="true">help</span>
</span>
<span
  data-direction="top-left"
  data-tooltip='Esta es la descripción de un tooltip "arriba-izquierda".'
  class="icon-box bg-light"
  tabindex="0"
>
  <span class="material-symbols-rounded o-icon" aria-hidden="true">help</span>
</span>

//DERECHA
<span
  data-direction="right-bottom"
  data-tooltip='Esta es la descripción de un tooltip "derecha-abajo".'
  class="icon-box bg-light"
  tabindex="0"
>
  <span class="material-symbols-rounded o-icon" aria-hidden="true">help</span>
</span>
<span
  data-direction="right"
  data-tooltip='Esta es la descripción de un tooltip "derecha".'
  class="icon-box bg-light"
  tabindex="0"
>
  <span class="material-symbols-rounded o-icon" aria-hidden="true">help</span>
</span>
<span
  data-direction="right-top"
  data-tooltip='Esta es la descripción de un tooltip "derecha-arriba".'
  class="icon-box bg-light"
  tabindex="0"
>
  <span class="material-symbols-rounded o-icon" aria-hidden="true">help</span>
</span>

//IZQUIERDA
<span
  data-direction="left-bottom"
  data-tooltip='Esta es la descripción de un tooltip "izquierda-abajo".'
  class="icon-box bg-light"
  tabindex="0"
>
  <span class="material-symbols-rounded o-icon" aria-hidden="true">help</span>
</span>
<span
  data-direction="left"
  data-tooltip='Esta es la descripción de un tooltip "izquierda".'
  class="icon-box bg-light"
  tabindex="0"
>
  <span class="material-symbols-rounded o-icon" aria-hidden="true">help</span>
</span>
<span
  data-direction="left-top"
  data-tooltip='Esta es la descripción de un tooltip "izquierda-arriba".'
  class="icon-box bg-light"
  tabindex="0"
>
  <span class="material-symbols-rounded o-icon" aria-hidden="true">help</span>
</span>

//INFERIOR
<span
  data-direction="bottom-right"
  data-tooltip='Esta es la descripción de un tooltip "abajo-derecha".'
  class="icon-box bg-light"
  tabindex="0"
>
  <span class="material-symbols-rounded o-icon" aria-hidden="true">help</span>
</span>
<span
  data-direction="bottom"
  data-tooltip='Esta es la descripción de un tooltip "abajo".'
  class="icon-box bg-light"
  tabindex="0"
>
  <span class="material-symbols-rounded o-icon" aria-hidden="true">help</span>
</span>
<span
  data-direction="bottom-left"
  data-tooltip='Esta es la descripción de un tooltip "abajo-izquierda".'
  class="icon-box bg-light"
  tabindex="0"
>
  <span class="material-symbols-rounded o-icon" aria-hidden="true">help</span>
</span>