Я пытаюсь сделать всплывающую подсказку только с Tailwind, я смог добраться сюда:
<script src = "https://cdn.tailwindcss.com"></script>
<br><br>
<div class = "shrink-0 cursor-pointer px-3">
<div class = "relative flex group">
<p>hover</p>
<div class = "absolute bottom-0 flex flex-col items-center hidden mb-6 group-hover:flex">
<span class = "relative z-10 p-2 text-xs text-gray-500 whitespace-no-wrap bg-white drop-shadow w-36">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
</div>
</div>
</div>
Как видите, проблема в том, что если элемент находится слишком близко к любому краю области просмотра, он обрезается. Как я могу предотвратить это? Я предполагаю, что это потому, что элемент абсолютно позиционирован.
Я бы оптимально хотел, чтобы всплывающая подсказка не уходила за пределы экрана, но в то же время оставалась как можно ближе к зависшему элементу.
Раньше я использовал плагин всплывающей подсказки, который определяет, не слишком ли близко он к краю области просмотра, а затем устанавливает его как внешний предел.
@NathanielFlick - о да, есть много плагинов, но я действительно пытаюсь сделать это только с помощью CSS, используя Tailwind. Я надеюсь, что у кого-то есть хорошее решение.
@tony единственная вещь в CSS, которая, как мне кажется, может быть близка, - это контейнерные запросы или, более конкретно, ваше абсолютное позиционирование.
Если вы инкапсулируете группу в относительный элемент, это должно помочь, высота элемента не имеет значения. и добавление ограничения на ширину вашего диапазона / всплывающей подсказки должно всегда держать его на экране.
.tooltip_span {
max-width: 75vw;
}
<script src = "https://cdn.tailwindcss.com"></script>
<div class = "shrink-0 cursor-pointer px-3">
<div class = "relative flex group">
<div class = "relative">
<p>hover <br/> with more lines</p>
<div class = "absolute flex flex-col items-center hidden mb-6 group-hover:flex">
<span class = "relative z-10 p-2 text-xs text-gray-500 whitespace-no-wrap bg-white drop-shadow w-36 tooltip_span">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
</div>
</div>
</div>
каков ваш ожидаемый результат? так как всплывающая подсказка могла располагаться в разных областях экрана