Dropdowns & Tooltips
Menús desplegables y consejos contextuales para mejor UX
1 Dropdowns Básicos
Menús desplegables simples que se abren al hacer clic.
Estructura del Dropdown:
<div class="dropdown">
<button data-bs-toggle="dropdown">Dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item">Item</a></li>
</ul>
</div>2 Direcciones de Dropdown
Controla la dirección en la que se abre el menú.
💡 Consejo:
Usa
.dropdown
,
.dropup
,
.dropend
, o
.dropstart
en el contenedor para controlar la dirección.
3 Contenido Avanzado
Los dropdowns pueden contener más que solo enlaces: formularios, texto, y más.
4 Tooltips Básicos
Los tooltips muestran información contextual al pasar el cursor o enfocar.
Inicializar Tooltips:
<button data-bs-toggle="tooltip"
data-bs-placement="top"
title="Texto del tooltip">
Botón
</button>
<script>
// Los tooltips requieren inicialización manual
var tooltipTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
</script>
⚠️ Importante:
Los tooltips requieren inicialización manual con JavaScript, a diferencia de otros componentes de Bootstrap.
5 Popovers
Los popovers son como tooltips más grandes que pueden contener encabezados y más contenido.
6 Ejemplo Práctico: Barra de Herramientas
Combina dropdowns y tooltips para crear interfaces ricas.
Editor de Documento
🎯 Puntos Clave
- Dropdowns: Funcionan automáticamente con atributos de datos, no necesitan inicialización
- Tooltips: Requieren inicialización manual con JavaScript
- Popovers: Como tooltips pero con más contenido (título + body)
- Direcciones: Controla dónde aparecen con atributos de placement
- Contenido flexible: Los dropdowns pueden contener cualquier HTML