Как сделать нормальный tooltip?

Илья Молчанов, Хороший вариант, но есть но.
Не по верх.
Я его правил.

.tooltip:before,
.tooltip:after {
  display: block;
  position: absolute;
  visibility: hidden;
  opacity: 0; 
  margin-bottom: 15px;
  -webkit-transition: opacity .7s, margin-bottom .7s;
  transition: opacity .7s, margin-bottom .7s;
  left: 50%;
  z-index: 9999;
}
.tooltip {
  position: relative;
}
.tooltip:before {
  bottom: 25px;
  left: 50%;
  padding: 5px 5px 9px 5px;
  width: 150px;
  margin-left: -75px;
  color: #fff;
  line-height: 15px;
  background-color: #202020;
  content: attr(data-title);
  border-radius: 2px;
  -webkit-box-shadow: border-box;
  box-shadow: border-box;
  text-align: center;
  -moz-filter: drop-shadow(0px 5px 4px rgba(50, 50, 50, 0.30));
  -webkit-filter: drop-shadow(0px 5px 4px rgba(50, 50, 50, 0.30));
  filter: drop-shadow(0px 5px 4px rgba(50, 50, 50, 0.30));
}
.tooltip:after {
  content: "";
  border-top: 10px solid #202020;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  bottom: 15px;
  margin-left: -10px;
  -moz-filter: drop-shadow(0px 5px 4px rgba(50, 50, 50, 0.30));
  -webkit-filter: drop-shadow(0px 5px 4px rgba(50, 50, 50, 0.30));
  filter: drop-shadow(0px 5px 4px rgba(50, 50, 50, 0.30));
}
.tooltip:hover:before,
.tooltip:hover:after {
  opacity: 1;
  margin-bottom: 0;
  visibility: visible;
}

Вставил з-индекс 9999, но все равно чет не поверх.

и .tooltip переделал, а то он применял стиль к моим кнопкам и выводил им тень и т.д.

Как сделать нормальный tooltip?

Илья Молчанов, и чем эта ошибка плоха и какие средства показывают что это ошибка.

Как сделать нормальный tooltip?

Андрей, Оставлю pointer-events: none;, раз проблем с ним вроде нет и все четко работает.

Как сделать нормальный tooltip?

по поводу z-index, если им играть, то
#i-have-a-tooltip:before
и
#i-have-a-tooltip:after

мы ставим z-index:0;

а когда ховер то z-index:1;

Я правильно понял и привел пример. ?

Как сделать нормальный tooltip?

Андрей, ага я почитал уже об этом способе ! вроде поддержка браузеров все ок.

Как сделать нормальный tooltip?

Андрей, а что касаемо работы в браузерах и на моб телефонах, в плане поддержки pointer-events: none;

Как сделать нормальный tooltip?

Но есть проблема мелкая, я чуть сделал как мне надо ну блоки вот https://codepen.io/anon/pen/GzZKXp
Поводи по верхним краям блока, видишь там если по первому водить по верху рядом с бордером то он там показывает как и 1 текст так и от 2 блока, мелькает. Ну или поводить выше чуть блока, тож всплывает.

Как сделать нормальный tooltip?

Зашибись, спасибо ! отлично.

Как лучше всего оформить адаптивно характеристики на сайте?

DanKud, Это я знаю. Видимо придется блоки вертеть так чтобы все ок было.

Как лучше всего оформить адаптивно характеристики на сайте?

Я не про это, а про адаптацию, при сжатии чтобы все ок было, может где-то есть готовые примеры или где-то посмотреть можно.

Анимация на сайта, теги а, див кнопки, ul, li, input и т.д, кто как делает?

Ankhena, а все понял, точно, работает, если одинаковая, спасибо ! а я чет лепил ).

Анимация на сайта, теги а, див кнопки, ul, li, input и т.д, кто как делает?

Ankhena, как понять если одинаковая ! ховер это когда наводишь ! она срабатывает, а фокус, это для импутов и т.д
Не совсем вас понял, приведите пример.

Анимация на сайта, теги а, див кнопки, ul, li, input и т.д, кто как делает?

Ankhena, а ну у меня так и сделано ! я к этому пришел уже. Ниже в посте писал.
Ховер ток добавить и все ) и фокус для импутов и т.д

Доработка выпадающего многоуровнего подменю, как решить проблему с пересечением мышки?

RAX7, а что правил только js?
да проблемы нет больше, большое спасибо.

Доработка выпадающего многоуровнего подменю, как решить проблему с пересечением мышки?

RAX7, с наступающим, глянь пожалуйста, я просто поставил на сайт, а вот проблему решить эту не могу.
а так скрипт эт о хорошо, он не пересекается с эффектами анимации на сайте, с ссылками и т.д.

Доработка выпадающего многоуровнего подменю, как решить проблему с пересечением мышки?

RAX7, ну что так и не вышло пофиксить косячек?

Анимация на сайта, теги а, див кнопки, ul, li, input и т.д, кто как делает?

Ankhena, привидите пример, а то не совсем понимаю.

Анимация на сайта, теги а, див кнопки, ul, li, input и т.д, кто как делает?

Ankhena, а ну я так уже сделал, ниже писал, что обновил код ! убрал лишнее.

Как создать такой на svg?

0ffff0, о джепеге и не говорили.

Как создать такой на svg?

а зачем такое делать на svg? если на css лучше. или я чет не догоняю.