Tooltip Component

Información importante

Este tooltip muestra información adicional al pasar el cursor sobre el botón.

Pasa el cursor sobre el botón de información para ver el tooltip. Este es el modo más común de uso.

<!-- Importar el componente -->
<script src="tooltip-component/index.js"></script>
<link rel="stylesheet" href="tooltip-component/index.css">

<!-- Implementación básica -->
<tooltip-component data-mode="hover">
  <button class="info-button" data-tooltip-trigger>
    <svg>...</svg> <!-- Icono de información -->
  </button>
  
  <div class="custom-tooltip" data-tooltip-content>
    <div class="tooltip-header">
      Información importante
    </div>
    <div class="tooltip-body">
      <p>Este tooltip muestra información adicional...</p>
    </div>
  </div>
</tooltip-component>

.info-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background-color: #3f51b5;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.info-button:hover {
  background-color: #303f9f;
}

.custom-tooltip {
  width: 250px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.tooltip-header {
  background-color: #3f51b5;
  color: white;
  padding: 8px 12px;
  font-weight: bold;
}

.tooltip-body {
  padding: 12px;
}

Ayuda

Instrucciones

Siga estos pasos para completar el proceso:

1. Complete el formulario
2. Verifique sus datos
3. Envíe la solicitud

Haz clic en el botón para mostrar el tooltip. El tooltip permanecerá visible hasta que hagas clic fuera de él.

<tooltip-component data-mode="click">
  <button class="help-button" data-tooltip-trigger>
    <svg>...</svg>
    Ayuda
  </button>
  
  <div class="help-tooltip" data-tooltip-content>
    <div class="tooltip-header">
      Instrucciones
    </div>
    <div class="tooltip-body">
      <p>Siga estos pasos para completar el proceso:</p>
      <ol>
        <li>Complete el formulario</li>
        <li>Verifique sus datos</li>
        <li>Envíe la solicitud</li>
      </ol>
    </div>
  </div>
</tooltip-component>

<!-- El atributo data-mode="click" hace que el tooltip
     se active al hacer clic en lugar de al pasar el cursor -->

Los componentes web

son una excelente manera de crear interfaces modulares

Modularidad

Enfoque de diseño que divide un sistema en partes más pequeñas (módulos) que pueden ser desarrolladas, probadas y mantenidas de forma independiente.

y reutilizables.

Pasa el cursor sobre los términos subrayados para ver su definición. Este patrón es útil para glosarios o explicaciones de términos técnicos.

<p>
  Los 
  <tooltip-component data-mode="hover">
    <span class="glossary-term" data-tooltip-trigger>
      componentes web
    </span>
    <div class="glossary-tooltip" data-tooltip-content>
      <h4>Componentes Web</h4>
      <p>Conjunto de tecnologías web que permiten...</p>
      <a href="#" target="_blank">Más información</a>
    </div>
  </tooltip-component>
  son una excelente manera de crear interfaces...
</p>

.glossary-term {
  border-bottom: 1px dashed #3f51b5;
  color: #3f51b5;
  cursor: help;
}

.glossary-tooltip {
  width: 280px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 16px;
}

.glossary-tooltip h4 {
  margin-top: 0;
  color: #3f51b5;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.glossary-tooltip a {
  color: #3f51b5;
  display: inline-block;
  margin-top: 8px;
  font-size: 0.9em;
}

Pasa el cursor sobre los botones para ver cómo los tooltips aparecen en diferentes posiciones según la configuración.

<tooltip-component 
  data-mode="hover" 
  data-content-positions="right-middle,bottom-middle,top-middle">
  <button class="position-button" data-tooltip-trigger>
    Posición derecha
  </button>
  
  <div class="position-tooltip" data-tooltip-content>
    <p>Este tooltip aparece a la derecha del botón...</p>
  </div>
</tooltip-component>

<!-- Posiciones disponibles:
  top-left, top-middle, top-right,
  right-top, right-middle, right-bottom,
  bottom-right, bottom-middle, bottom-left,
  left-bottom, left-middle, left-top
-->

<!-- El componente intentará usar las posiciones en el
     orden especificado hasta encontrar una donde el
     tooltip sea completamente visible -->