Tooltips y popovers

Tooltips básicos y configuración

Los tooltips son pequeños elementos informativos que aparecen cuando el usuario pasa el cursor sobre un elemento específico, proporcionando contexto adicional o ayuda sin interrumpir el flujo de trabajo. En Bootstrap, estos elementos se activan mediante interacción del usuario y desaparecen automáticamente cuando se retira el cursor.

Estructura básica de tooltips

La implementación de un tooltip básico requiere únicamente dos atributos en el elemento HTML: data-bs-toggle="tooltip" para activar la funcionalidad y title para definir el contenido que se mostrará.

<button type="button" class="btn btn-primary" 
        data-bs-toggle="tooltip" 
        title="Este es un tooltip informativo">
  Botón con tooltip
</button>

El atributo data-bs-toggle="tooltip" indica a Bootstrap que el elemento debe mostrar un tooltip al interactuar con él, mientras que title contiene el texto que aparecerá en la pequeña ventana emergente.

Tooltips en diferentes elementos

Los tooltips se pueden aplicar a prácticamente cualquier elemento HTML que ya dominas. Son especialmente útiles en botones de acción, enlaces informativos y elementos de navegación:

<!-- Tooltip en enlace -->
<a href="#" class="text-decoration-none" 
   data-bs-toggle="tooltip" 
   title="Ir a la página de contacto">
  Contacto
</a>

<!-- Tooltip en badge -->
<span class="badge bg-info" 
      data-bs-toggle="tooltip" 
      title="Indica el número de notificaciones pendientes">
  3
</span>

<!-- Tooltip en icono informativo -->
<span class="text-muted" 
      data-bs-toggle="tooltip" 
      title="La información se actualiza cada 5 minutos">
  ℹ️
</span>

Posicionamiento básico

Bootstrap permite controlar la posición del tooltip usando el atributo data-bs-placement. Las cuatro posiciones principales son top, bottom, left y right:

<!-- Tooltip arriba -->
<button class="btn btn-outline-primary m-2" 
        data-bs-toggle="tooltip" 
        data-bs-placement="top" 
        title="Tooltip posicionado arriba">
  Top
</button>

<!-- Tooltip abajo -->
<button class="btn btn-outline-success m-2" 
        data-bs-toggle="tooltip" 
        data-bs-placement="bottom" 
        title="Tooltip posicionado abajo">
  Bottom
</button>

La posición top es la predeterminada cuando no se especifica data-bs-placement. El sistema de posicionamiento de Bootstrap ajusta automáticamente la ubicación del tooltip si no hay espacio suficiente en la dirección especificada.

Tooltips en componentes de navegación

Los tooltips son especialmente útiles en elementos de navegación para proporcionar información adicional sobre las acciones disponibles:

<nav class="nav nav-pills">
  <a class="nav-link" 
     href="#" 
     data-bs-toggle="tooltip" 
     title="Ver todas las publicaciones">
    Inicio
  </a>
  <a class="nav-link" 
     href="#" 
     data-bs-toggle="tooltip" 
     title="Gestionar tu perfil de usuario">
    Perfil
  </a>
  <a class="nav-link" 
     href="#" 
     data-bs-toggle="tooltip" 
     title="Configurar preferencias de la aplicación">
    Ajustes
  </a>
</nav>

Consideraciones de contenido

El contenido del tooltip debe ser breve y descriptivo, limitándose a texto plano que complemente la información visual del elemento. El atributo title acepta únicamente texto sin formato, lo que hace que los tooltips sean ideales para descripciones concisas, etiquetas explicativas o instrucciones cortas.

<!-- Ejemplos de contenido apropiado para tooltips -->
<button class="btn btn-danger" 
        data-bs-toggle="tooltip" 
        title="Esta acción no se puede deshacer">
  Eliminar
</button>

<input type="password" 
       class="form-control" 
       data-bs-toggle="tooltip" 
       title="Mínimo 8 caracteres con números y letras"
       placeholder="Contraseña">

Los tooltips se activan automáticamente al pasar el cursor sobre el elemento y se ocultan cuando el cursor se aleja, creando una experiencia de usuario fluida y no intrusiva que complementa la funcionalidad existente sin requerir clics adicionales o interrumpir la navegación.

Popovers estructura y contenido

Los popovers son elementos informativos más completos que los tooltips, diseñados para mostrar contenido estructurado con título y cuerpo. A diferencia de los tooltips que solo muestran texto plano, los popovers pueden contener información más rica y se activan típicamente mediante clic, proporcionando una experiencia interactiva más deliberada.

Diferencias fundamentales con tooltips

Mientras que los tooltips utilizan únicamente el atributo title, los popovers requieren una estructura más elaborada que incluye tanto un título como contenido del cuerpo. Esta capacidad de mostrar información estructurada los hace ideales para explicaciones más detalladas o contenido que requiere más espacio visual.

<button type="button" class="btn btn-primary" 
        data-bs-toggle="popover" 
        data-bs-title="Título del popover"
        data-bs-content="Este es el contenido principal del popover que puede ser más extenso que un tooltip.">
  Botón con popover
</button>

Estructura básica y atributos esenciales

La implementación de un popover básico requiere tres atributos fundamentales: data-bs-toggle="popover" para activar la funcionalidad, data-bs-title para el título y data-bs-content para el contenido principal.

<!-- Popover básico con título y contenido -->
<button class="btn btn-info" 
        data-bs-toggle="popover" 
        data-bs-title="Información importante"
        data-bs-content="Los cambios se guardarán automáticamente cada 30 segundos. Puedes forzar el guardado usando Ctrl+S.">
  Ayuda sobre guardado
</button>

El atributo data-bs-title define el encabezado del popover, mientras que data-bs-content contiene la información principal que se mostrará en el cuerpo del elemento emergente.

Popovers en elementos de navegación

Los popovers son especialmente útiles en elementos de navegación cuando necesitas proporcionar información contextual más detallada que la que permite un tooltip:

<nav class="nav nav-pills">
  <a class="nav-link active" 
     href="#" 
     data-bs-toggle="popover" 
     data-bs-title="Panel principal"
     data-bs-content="Aquí encontrarás un resumen de todas tus actividades recientes y notificaciones pendientes.">
    Dashboard
  </a>
  <a class="nav-link" 
     href="#" 
     data-bs-toggle="popover" 
     data-bs-title="Gestión de proyectos"
     data-bs-content="Crea, edita y organiza tus proyectos. Incluye herramientas de colaboración y seguimiento de progreso.">
    Proyectos
  </a>
</nav>

Aplicación en formularios y controles

Los popovers ofrecen una excelente manera de proporcionar ayuda contextual en formularios sin saturar visualmente la interfaz:

<div class="mb-3">
  <label for="password" class="form-label">
    Contraseña nueva
    <button type="button" class="btn btn-link btn-sm p-0" 
            data-bs-toggle="popover" 
            data-bs-title="Requisitos de contraseña"
            data-bs-content="Debe contener al menos 8 caracteres, incluyendo una mayúscula, una minúscula, un número y un símbolo especial.">
      ℹ️
    </button>
  </label>
  <input type="password" class="form-control" id="password">
</div>

Contenido estructurado y casos de uso

Los popovers permiten mostrar información más compleja que los tooltips, siendo ideales para explicaciones paso a paso, listas de características o descripciones detalladas:

<!-- Popover con información de producto -->
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Plan Premium</h5>
    <button class="btn btn-outline-info btn-sm" 
            data-bs-toggle="popover" 
            data-bs-title="Características incluidas"
            data-bs-content="Almacenamiento ilimitado, soporte prioritario 24/7, acceso a herramientas avanzadas, colaboración en equipo y copias de seguridad automáticas.">
      Ver detalles
    </button>
  </div>
</div>

Posicionamiento avanzado

Al igual que los tooltips, los popovers utilizan data-bs-placement para controlar su posición, pero debido a su mayor tamaño, la elección de posición es más crítica:

<div class="d-flex justify-content-center gap-3 my-4">
  <button class="btn btn-outline-primary" 
          data-bs-toggle="popover" 
          data-bs-placement="left"
          data-bs-title="Posición izquierda"
          data-bs-content="El popover aparece a la izquierda del elemento activador.">
    Left
  </button>
  
  <button class="btn btn-outline-success" 
          data-bs-toggle="popover" 
          data-bs-placement="right"
          data-bs-title="Posición derecha"
          data-bs-content="El popover aparece a la derecha del elemento activador.">
    Right
  </button>
</div>

Integración con componentes existentes

Los popovers se integran naturalmente con badges, cards y otros componentes para proporcionar información adicional bajo demanda:

<div class="alert alert-warning" role="alert">
  <strong>Atención!</strong> Tu suscripción expira pronto.
  <span class="badge bg-info ms-2" 
        data-bs-toggle="popover" 
        data-bs-title="¿Qué sucede al expirar?"
        data-bs-content="Perderás acceso a las funciones premium pero tus datos se mantendrán seguros durante 30 días adicionales.">
    Más info
  </span>
</div>

La principal ventaja de los popovers radica en su capacidad para mostrar contenido estructurado y más extenso sin ocupar espacio permanente en la interfaz, manteniéndose ocultos hasta que el usuario los solicita específicamente mediante interacción directa.

Posicionamiento y personalización

Posiciones avanzadas y automáticas

Más allá de las cuatro posiciones básicas, Bootstrap ofrece variaciones específicas que proporcionan mayor control sobre el posicionamiento exacto de tooltips y popovers. Estas opciones incluyen posiciones automáticas que se ajustan dinámicamente según el espacio disponible.

<!-- Posiciones específicas para tooltips -->
<button class="btn btn-primary me-2" 
        data-bs-toggle="tooltip" 
        data-bs-placement="top-start"
        title="Tooltip alineado al inicio del borde superior">
  Top Start
</button>

<button class="btn btn-success me-2" 
        data-bs-toggle="tooltip" 
        data-bs-placement="bottom-end"
        title="Tooltip alineado al final del borde inferior">
  Bottom End
</button>

<button class="btn btn-warning" 
        data-bs-toggle="tooltip" 
        data-bs-placement="auto"
        title="Bootstrap elegirá la mejor posición automáticamente">
  Auto
</button>

La opción auto es especialmente útil en diseños responsive donde el espacio disponible puede variar según el dispositivo. Bootstrap calculará automáticamente la posición óptima basándose en el espacio disponible alrededor del elemento.

Personalización visual con utilidades

Los tooltips y popovers heredan el tema visual del documento, pero puedes personalizar su apariencia mediante CSS personalizado o aprovechando las capacidades de tematización de Bootstrap:

<!-- Elementos con diferentes contextos visuales -->
<div class="p-4 bg-dark">
  <button class="btn btn-light" 
          data-bs-toggle="tooltip" 
          data-bs-placement="top"
          title="Tooltip en contexto oscuro">
    Botón en fondo oscuro
  </button>
</div>

<div class="p-4 bg-primary">
  <button class="btn btn-outline-light" 
          data-bs-toggle="popover" 
          data-bs-title="Popover contrastante"
          data-bs-content="El popover mantiene buena legibilidad independientemente del fondo."
          data-bs-placement="bottom">
    Popover en contexto colorido
  </button>
</div>

Posicionamiento responsive y consideraciones de espacio

En diseños responsive, es importante considerar cómo se comportan los tooltips y popovers en diferentes tamaños de pantalla. Las posiciones laterales pueden ser problemáticas en dispositivos móviles:

<div class="row">
  <div class="col-md-6">
    <button class="btn btn-info w-100" 
            data-bs-toggle="popover" 
            data-bs-placement="top"
            data-bs-title="Mejor para móviles"
            data-bs-content="Las posiciones top y bottom funcionan mejor en pantallas pequeñas.">
      Popover adaptado a móvil
    </button>
  </div>
  <div class="col-md-6">
    <button class="btn btn-secondary w-100" 
            data-bs-toggle="popover" 
            data-bs-placement="auto"
            data-bs-title="Posicionamiento inteligente"
            data-bs-content="La opción auto se adapta automáticamente al espacio disponible.">
      Posicionamiento automático
    </button>
  </div>
</div>

Integración avanzada con componentes

Los tooltips y popovers se pueden integrar sofisticadamente con otros componentes de Bootstrap para crear experiencias de usuario más ricas:

<!-- En grupos de botones -->
<div class="btn-group" role="group">
  <button type="button" class="btn btn-outline-primary"
          data-bs-toggle="tooltip" 
          title="Crear nuevo documento">
    ➕
  </button>
  <button type="button" class="btn btn-outline-primary"
          data-bs-toggle="tooltip" 
          title="Editar documento actual">
    ✏️
  </button>
  <button type="button" class="btn btn-outline-danger"
          data-bs-toggle="popover" 
          data-bs-title="Confirmar eliminación"
          data-bs-content="Esta acción eliminará permanentemente el documento seleccionado."
          data-bs-placement="bottom">
    🗑️
  </button>
</div>

Personalización de triggers y comportamiento

Aunque nos enfocamos en la configuración básica, puedes modificar el comportamiento de activación usando el atributo data-bs-trigger para cambiar cómo se muestran los elementos:

<!-- Popover que se activa con clic -->
<button class="btn btn-info" 
        data-bs-toggle="popover" 
        data-bs-trigger="click"
        data-bs-title="Clic para activar"
        data-bs-content="Este popover requiere un clic para mostrarse y otro para ocultarse.">
  Clic para mostrar
</button>

<!-- Popover que se activa con focus -->
<input type="text" 
       class="form-control mt-3" 
       data-bs-toggle="popover" 
       data-bs-trigger="focus"
       data-bs-title="Ayuda contextual"
       data-bs-content="Introduce tu nombre completo tal como aparece en tu documento de identidad."
       placeholder="Nombre completo">

Consideraciones de accesibilidad y usabilidad

El posicionamiento inteligente también debe considerar la accesibilidad. Los elementos informativos deben permanecer visibles y accesibles sin interferir con otros contenidos:

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Producto 
          <span data-bs-toggle="tooltip" 
                data-bs-placement="auto"
                title="Nombre completo del producto incluyendo variantes"
                class="text-muted">ℹ️</span>
        </th>
        <th>Estado 
          <span data-bs-toggle="popover" 
                data-bs-placement="auto"
                data-bs-title="Estados disponibles"
                data-bs-content="Disponible: En stock y listo para envío. Agotado: Temporalmente sin existencias. Descontinuado: Ya no se fabrica."
                class="text-muted">❓</span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Laptop Gaming Pro</td>
        <td><span class="badge bg-success">Disponible</span></td>
      </tr>
    </tbody>
  </table>
</div>

Combinación estratégica de tooltips y popovers

Una estrategia efectiva consiste en usar tooltips para información breve e inmediata, y popovers para contenido que requiere más detalle o interacción deliberada:

<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <h5 class="mb-0">Configuración de cuenta</h5>
    <button class="btn btn-sm btn-outline-info" 
            data-bs-toggle="popover" 
            data-bs-placement="left"
            data-bs-title="Centro de ayuda"
            data-bs-content="¿Necesitas ayuda con la configuración? Visita nuestro centro de ayuda o contacta con soporte técnico.">
      Ayuda
    </button>
  </div>
  <div class="card-body">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="notifications">
      <label class="form-check-label" for="notifications">
        Notificaciones por email
        <span data-bs-toggle="tooltip" 
              title="Recibirás emails sobre actualizaciones importantes"
              class="text-muted ms-1">ℹ️</span>
      </label>
    </div>
  </div>
</div>

La clave del posicionamiento y personalización efectivos radica en elegir la posición apropiada según el contexto, considerar las limitaciones de espacio en diferentes dispositivos, y usar tooltips y popovers de manera complementaria para crear una experiencia de usuario coherente y accesible.