Блок або псевдоэлемент
CSS-tooltip може бути як окремим HTML-блоком з власною структурою, так і псевдоэлементом іншого блоку. Кожен з цих варіантів має свої плюси і мінуси, які слід враховувати.
Всередині окремого контейнера набагато простіше маніпулювати контентом. У ньому можна розмістити зображення, заголовки і інші елементи.
Псевдоэлемент дозволяє позбутися від зайвих блоків і зробити верстку трохи легше. Текстовий контент можна розмістити в атрибуті цільового елемента і не піклуватися про створення самої підказки, все зробить CSS. Однак псевдоэлемент погано підходить для блоку зі складною структурою. Крім того, він може бути створений тільки для закриваються тегів. Не можна причепити таку підказку безпосередньо до зображення.
Створення спливаючого блоку на CSS
Створимо красиво оформлений tooltip зі складною структурою для найближчої до нас зірки з сузір’я Центавра.
Насамперед, визначимося з HTML-розміткою:
