templates/components/products.html.twig line 1

Open in your IDE?
  1. <style>
  3.     
  4.     /* Estilo del texto con límite de 3 líneas */
  5.     .text-container {
  6.       display: -webkit-box;
  7.       -webkit-line-clamp: 3;
  8.       -webkit-box-orient: vertical;
  9.       overflow: hidden;
  10.       transition: max-height 0.5s ease;
  11.     }
  12.     /* Cuando está expandido, se muestra completo */
  13.     .expanded {
  14.       -webkit-line-clamp: unset;
  15.     }
  16.     /* Estilo del botón */
  17.     .toggle-btn {
  18.       cursor: pointer;
  19.       color: #007bff;
  20.       font-weight: bold;
  21.       text-align: center;
  22.       margin-top: 8px;
  23.       user-select: none;
  24.       display: inline-block;
  25.     }
  26.     /* Aumentar el ancho del tooltip */
  27.     .tooltip-inner {
  28.       max-width: 300px !important; /* Puedes cambiar este valor */
  29.       text-align: left;
  30.       white-space: normal;
  31.     }
  32.     .order-container .title-block{
  33.             top: 30px;
  34.             z-index: 1000;
  35.             background: #f8f9fa;
  36.     }
  37.     
  38. </style>
  41.   {% for product in products %}
  42.       {% include "components/products/product.html.twig" with {'product': product} %}
  43.   {% endfor %}
  44.             
  45.     
  47. <script>
  48.     $(document).ready(function() {
  49.         // Inicializar tooltips de Bootstrap
  50.         var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
  51.         var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  52.             return new bootstrap.Tooltip(tooltipTriggerEl);
  53.         });
  55.         $(".toggle-btn").each(function() {
  56.             var fullText = $(this).prev(".text-container").text(); // Obtener el texto completo
  57.             $(this).attr("title", fullText); // Asignar el texto al tooltip
  58.         });
  59.     });
  60. </script>
  61.