Хочу сделать модальное всплывающее окно на пахни [закрыто] ⇐ Html

[Гость]

У меня есть интернет-магазин, и я хочу добавить модальное всплывающее окно при падении по описанию.

по умолчанию я установил эти стили, чтобы скрыть текст, который не вписывается в контейнер.

Код: Выделить всё

p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Вот моя структура в blade.file и стили, которые я попробовал

Код: Выделить всё

.description {
position: relative;

p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.descriptionModal {
position: absolute;
top: 100%;
left: 0;
background-color: #d0d864;
padding: 10px;
width: fit-content;
max-width: 300px;
height: auto;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 1s ease;
z-index: 10;
white-space: normal;
/* Allow text to wrap inside the modal */
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

&:hover {
.descriptionModal {
opacity: 1;
visibility: visible;
transition-delay: 1s;
}
}
}
< /code>

{{ $product->productShortDescription }}


{{ $product->productShortDescription }}

Вот изображение с результатом


Я хочу, чтобы Popup на экране была гибкой и расширенной на высоте, когда текст превышает.>

Подробнее здесь: https://stackoverflow.com/questions/795 ... p-on-hover