Как добавить всплывашку?

Question

[sciencefront]

но не попап
а обычную всплывашку
при ховере на span

<div class="wrap">
  <div class="item">
    <p>testi 1 <span>icon</span></p>
  </div>
   <div class="item">
    <p>test 2 <span>icon</span></p>
  </div>
</div>

Comments

[Вадим]

гуглите: tooltip css

[sciencefront]

Вадим, пробую
https://codepen.io/Olya097/pen/RwMYmoR

[Вадим]

sciencefront, так, и чего? Или вы мне это так, для информации?

[sciencefront]

Ankhena, есть свойство

.item:nth-child(10n+2) {
  grid-column: 4;
}

grid-column: 4;
не будет корректно работать для 20, 30 элемента и тд

[Ankhena]

sciencefront,

не будет корректно работать для 20, 30 элемента и тд

да, так не будет. Вам нужно конкретно задавать для каждого элемента. Можно через js.

Можно делать итемы разного размера с использованием ключевого слова span. И задавать им, например, padding на свободную площадь. Тогда будет работать и через nth-child.

Как выглядит ваш дизайн, что ему нужна бесконечная сетка с дырками?

[sciencefront]

Ankhena ,

[Ankhena]

sciencefront, мало понятно как это участвует в макете сайта и где там контент и что вообще происходит на самом деле.

[sciencefront]

Ankhena, где белое - то итемы
внутри них будет текст

[Ankhena]

sciencefront, выглядит странно, ну да ладно, проблемы дизайнера.

Мне больше всего, пожалуй, нравится вариант с nth-child, gc через span и margin (левыми для тех у кого пусто слева и правыми для тех у кого справа) (предыдущий с паддингами менее удобный).
Дальше есть разные вариации.
- с aspect-ratio самая простая, там нужный margin можно поставить в auto и нет проблем с шириной при условии, что нет строк с одним item
- писать ширину через calc и margin-left auto
- писать margin через calc

[sciencefront]

Ankhena, можно минимальный пример? пожалуйста

[Ankhena]

sciencefront, что-то типа

grid-column: span 2;
  margin-left: auto;
  width: calc(50% - var(--gap) / 2);

[Ankhena]

sciencefront, справились?

[sciencefront]

Ankhena, не очень..