Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail


Ответ
 
Опции темы
Старый 20.01.2019, 02:51   #1
groc
Новичок
Джуниор
 
Регистрация: 20.01.2019
Сообщений: 1
По умолчанию tooltip на html и css

Здравствуйте.

Подскажите как мне разметить по середине подсказку?

Есть подсказка и под ней типо что то стрелки так не понимаю как установить эту стрелку по середине относительно картинки ссылки и так же по середине самой подсказки

Код:
<a id="test" data-position="top" data-tooltip="test"><img src="https://www.iapps4you.com/images/apps/242/242709/logo.jpg" width="64" height="64"></a>

<a id="test" data-position="top" data-tooltip="test test test test"><img src="https://www.iapps4you.com/images/apps/242/242709/logo.jpg" width="64" height="64"></a>
Код:
a[data-tooltip] {
  position: relative;
}
a[data-tooltip]:after, a[data-tooltip]:before {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 99;
}
a[data-tooltip]:before {
  content: attr(data-tooltip);
  background: #000;
  color: #a1b874;
  border:1px solid #748c46;
  font-size: 10px;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 5px;
  white-space: nowrap;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}
a[data-tooltip]:after {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  content: '';
}
a[data-tooltip]:hover:after, a[data-tooltip]:hover:before {
  visibility: visible;
  opacity: 0.85;
  transform: translateY(0px);
}

a[data-tooltip][data-position="top"]:before {
  bottom: 100%;
  left: 0;
  margin-bottom: 10px;
}

a[data-tooltip][data-position="top"]:after {
  border-top-color: #748c46;
  border-bottom: none;
  bottom: 101%;
    left: 50%;
  margin-bottom: 4px;
}
Вот ссылка на пример
groc вне форума Ответить с цитированием
Ответ

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Tooltip на HTML и CSS s88s HTML и CSS 1 28.10.2018 02:34
HTML и CSS hockeyman Общие вопросы Web 0 17.05.2017 00:23
HTML, CSS - Управление CSS анимацией HTML+CSS+JS dobryc HTML и CSS 1 18.11.2014 06:58