CSS-эффекты и графика

Речевые облака и подсказки

Пузырь с хвостиком на любой стороне: положение, размер и наклон хвостика, скругление, рамка. Хвостик собран на границах, поэтому не требует ни картинки, ни лишнего элемента.

Загрузить пример

Заготовки

Настройки

Текст подсказки

Где хвостик

Сдвиг хвостика вдоль стороны: 50 %

Полуширина хвостика: 12 px Длина хвостика: 10 px

Скругление: 10 px Внутренний отступ: 10 px

Толщина рамки: 0 px С рамкой хвостик рисуется двумя треугольниками, и размер нижнего считается точно — иначе рамка вдоль хвостика получилась бы разной толщины.

Фон Текст Рамка

Превью

Нажмите, чтобы скопировать

Подсказке нужен role="tooltip" и связь с элементом через aria-describedby — иначе её увидят только зрячие.

CSS

.tooltip {
  position: relative;
  display: inline-block;
  max-width: 260px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #1f2937;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.45;
}

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 10px 12px 0 12px;
  border-top-color: #1f2937;
}

HTML

<span class="tooltip" role="tooltip">Нажмите, чтобы скопировать</span>