21 Incorporar Tooltips en las CARPETA en el curso de LARAVEL (PHP y MySql) FullStack

Duración: 5 min
Módulo: 🎨 Personalización y Edición de Carpetas Lección 5 de 9
Anterior
20 Controller actualizar el nombre de la CARPETA en el curso de LARAVEL (PHP y MySql) FullStack
Siguiente
22 Menú opción de carpetas de colores en el curso de LARAVEL (PHP y MySql) FullStack

Descripción

💡 Lección 21: Incorporar Tooltips en las Carpetas

Este capítulo se dedica a una mejora de la experiencia de usuario (UX) en el frontend mediante la adición de Tooltips a los componentes de carpeta. Este recurso permite que el usuario vea el nombre completo de una carpeta al pasar el ratón sobre ella.

⚙️ Implementación de Tooltips de Bootstrap:

  • Identificación de la Función: El objetivo es hacer que, al pasar el cursor sobre una carpeta (como en Google Drive), aparezca un pequeño recuadro flotante mostrando el nombre completo [00:30].
  • Activación en el Código: Se utiliza el componente nativo de Bootstrap llamado "Tooltips" [01:01].
  • Atributos Necesarios: Se añaden los siguientes atributos al contenedor de la carpeta (<div>):
    • data-toggle="tooltip": Para activar el componente Tooltip [01:36].
    • data-placement="bottom": Para asegurar que el Tooltip aparezca en la parte inferior de la carpeta.
    • title="...": Para definir el texto que se mostrará.

🏷️ Contenido Dinámico del Tooltip:

  • Nombre Dinámico: Para que el Tooltip muestre el nombre correcto de cada carpeta, el atributo title se configura dinámicamente utilizando la variable del bucle @foreach: title="{{$carpeta->nombre}}" [02:37].

🚧 Próximos Pasos (Archivos y Eliminación):

  • Módulo de Archivos: Se anuncia que el enfoque del próximo video será el desarrollo del módulo para subir y gestionar archivos dentro de las carpetas [04:37].
  • Aparcamiento de la Eliminación: Se explica la decisión de posponer la función de Eliminar (CRUD: Delete) hasta el final del curso, debido a las restricciones de integridad referencial en la base de datos (relación uno a muchos). La eliminación de una carpeta requiere eliminar previamente o restringir la eliminación de todos los archivos y subcarpetas relacionados para evitar errores [03:07].

El video concluye con la implementación exitosa de los Tooltips, que se muestran de manera correcta y con el nombre exacto de la carpeta sobre la que se pasa el cursor [02:47].

$0.00
Iniciar sesión para inscribirse

Lecciones

⚙️ Configuración e Inicialización
Lección 1. 01 Presentación al curso de Sistema de gestión de archivos con LARAVEL (PHP y MySql) FullStack 6 min
Lección 2. 02 Módulo ajuste de login personalizado con LARAVEL (PHP y MySql) FullStack 25 min
Lección 3. 03 Como instalar Animate.css en el curso con LARAVEL (PHP y MySql) FullStack 13 min
Lección 4. 04 Registro personalizado en el curso de LARAVEL (PHP y MySql) FullStack 14 min
Lección 5. 05 Como hacer inicio de sesión de forma automatica despues del registro LARAVEL (PHP y MySql) 8 min
🏗️ Modelos de Datos y Controladores
Lección 1. 06 Creación del modelo CARPETAS en el curso de LARAVEL (PHP y MySql) FullStack 15 min
Lección 2. 07 Creación del modelo ARCHIVOS en el curso de LARAVEL (PHP y MySql) FullStack 7 min
Lección 3. 08 Modelo entidad relación en el curso con LARAVEL (PHP y MySql) FullStack 9 min
Lección 4. 09 Crear controladores en el curso de sistema de gestión de archivos con LARAVEL (PHP y MySql) 10 min
📁 Gestión y Navegación de Carpetas
Lección 1. 10 Crear ventana modal para el registro de carpetas en el curso con LARAVEL (PHP y MySql) FullStack 8 min
Lección 2. 11 Crear carpetas en el curso de sistema de gestión de archivos con LARAVEL (PHP y MySql) FullStack 10 min
Lección 3. 12 Mostrar CARPETAS creadas en el curso de LARAVEL (PHP y MySql) FullStack 8 min
Lección 4. 13 Ingresar a las CARPETAS en el curso de LARAVEL (PHP y MySql) FullStack 12 min
Lección 5. 14 Crear SUBCARPETAS en el sistema de gestión de archivos en el curso de LARAVEL (PHP y MySql) 10 min
Lección 6. 15 Mostrar SUBCARPETAS creadas en el curso de LARAVEL (PHP y MySql) FullStack 10 min
Lección 7. 16 Mostrar solo las CARPETAS padre en el curso de LARAVEL (PHP y MySql) FullStack 8 min
🎨 Personalización y Edición de Carpetas
Lección 1. 17 Mostrar opciones de carpeta en el curso de Sistema de Gestión de archivos LARAVEL (PHP y MySql) 14 min
Lección 2. 18 Mostrar menú de la carpeta en el curso de sistema de gestión de archivos con LARAVEL- PHP y MySql 9 min
Lección 3. 19 Ventana modal para CAMBIAR NOMBRE a la carpeta en el curso de LARAVEL (PHP y MySql) FullStack 7 min
Lección 4. 20 Controller actualizar el nombre de la CARPETA en el curso de LARAVEL (PHP y MySql) FullStack 11 min
Lección 5. 21 Incorporar Tooltips en las CARPETA en el curso de LARAVEL (PHP y MySql) FullStack 5 min
Lección 6. 22 Menú opción de carpetas de colores en el curso de LARAVEL (PHP y MySql) FullStack 8 min
Lección 7. 23 Actualizar el color de la CARPETA en el curso de LARAVEL (PHP y MySql) FullStack 12 min
Lección 8. 24 Controller actualizar los 4 colores de las carpetas en el curso d LARAVEL (PHP y MySql) FullStack 5 min
Lección 9. 25 Controller colores de las SUBCARPETAS en el curso de LARAVEL (PHP y MySql) FullStack 15 min
📤 Carga y Almacenamiento de Archivos
Lección 1. 26 Como instalar Dropzone.js para subir archivos en el curso de LARAVEL (PHP y MySql) FullStack 12 min
Lección 2. 27 Uploads de archivos a las carpetas en el fomulario en el curso de LARAVEL (PHP y MySql) FullStack 16 min
Lección 3. 28 Uploads de archivos a las carpetas de forma PÚBLICA Y PRIVADO curso de LARAVEL (PHP y MySql) 10 min
Lección 4. 29 Como registrar archivos en la BASE de DATOS en el curso de LARAVEL (PHP y MySql) FullStack 9 min
📄 Listado y Visualización de Archivos
Lección 1. 30 Como mostrar los archivos de la BD en las carpetas en el curso de LARAVEL (PHP y MySql) FullStack 10 min
Lección 2. 31 Como listar los archivos de la BD en las carpetas en el curso de LARAVEL (PHP y MySql) FullStack 8 min
Lección 3. 32 Como poner iconos de cada archivos en las carpetas del curso de LARAVEL (PHP y MySql) FullStack 12 min
Lección 4. 33 Como hacer un visor de imágenes en las carpetas en el curso de LARAVEL (PHP y MySql) FullStack 11 min
Lección 5. 34 Como hacer un visor de PDF en las carpetas en el curso de LARAVEL (PHP y MySql) FullStack (2) 8 min
Lección 6. 35 Como hacer un visor de archivos DOCX y descargarlo en el curso de LARAVEL (PHP y MySql) FullStack 8 min
Lección 7. 36 Como hacer un visor VIDEOS Y AUDIOS en el curso de LARAVEL (PHP y MySql) FullStack 10 min
🗑️ Eliminación y Seguridad de Archivos
Lección 1. 37 Como eliminar los archivos en directorio y base de datos de LARAVEL (PHP y MySql) FullStack 18 min
Lección 2. 38 Módelo entidad relación USUARIOS - CARPETAS en el curso de LARAVEL (PHP y MySql) FullStack 9 min
Lección 3. 39 Mostrar solo carpetas de USUARIOS AUTENTICADOS en el curso de LARAVEL (PHP y MySql) FullStack 14 min
Lección 4. 40 Subir archivos de forma privada en el servidor en el curso de LARAVEL (PHP y MySql) FullStack 13 min
Lección 5. 41 Como mostrar archivos de manera privada en el curso de LARAVEL (PHP y MySql) FullStack 12 min
Lección 6. 42 Verificar auth Permisos para acceder al archivo en el curso de LARAVEL (PHP y MySql) FullStack 9 min
🔗 Opciones de Compartición y Privacidad
Lección 1. 43 Módulo compartir archivo de PRIVADO a PÚBLICO en el curso de LARAVEL (PHP y MySql) FullStack 11 min
Lección 2. 44 Diseño para compartir archivo de PRIVADO a PÚBLICO en el curso de LARAVEL (PHP y MySql) FullStack 13 min
Lección 3. 45 Cambiar estado del archivo PRIVADO a PÚBLICO en el curso de LARAVEL (PHP y MySql) FullStack 10 min
Lección 4. 46 Mover Archivo de Privado a Público en el Curso FullStack de Laravel (PHP y MySQL) 7 min
Lección 5. 47 Mover el archivo de PÚBLICO a PRIVADO en el curso de LARAVEL (PHP y MySql) FullStack 11 min
Lección 6. 48 Copiar vinculo para compartir de forma automática en el curso de LARAVEL (PHP y MySql) FullStack 12 min
Lección 7. 49 Generar Código QR para compartir el archivo en el curso de LARAVEL (PHP y MySql) FullStack 12 min
🧹 Mantenimiento del Sistema
Lección 1. 50 Como eliminar las carpetas en base de datos en el curso de LARAVEL (PHP y MySql) FullStack 15 min
Lección 2. 51 Como eliminar carpetas privadas y publicas en el curso de LARAVEL (PHP y MySql) FullStack 12 min
👑 Roles, Permisos y Panel de Control
Lección 1. 52 ROLES Y PERMISOS en el curso de LARAVEL (PHP y MySql) FullStack 8 min
Lección 2. 53 Roles del sistema para los permisos en el curso de LARAVEL (PHP y MySql) FullStack 13 min
Lección 3. 54 Permisos en las rutas y vistas en el curso de LARAVEL (PHP y MySql) FullStack 15 min
Lección 4. 55 Panel administrador y usuario con roles y permisos en el curso de LARAVEL (PHP y MySql) FullStack 16 min

Apoya este proyecto

Si te gusta nuestro contenido, ¡apóyanos con una donación!

Donar por Airtm Donar por Binance

¡Gracias por tu apoyo! ❤️

Volver al curso