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

Question

[Антон Вебсайтовский]

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

Поставил на css, tooltip.
Но он не адаптивный.
Если допустим будет 2 строки, то он уже кривой, как доработать и сделать чтобы был адаптивный и нормальный, если 3 строки или более или 1, чтобы выводился нормально.
Стрелка уезжает куда-то под.

Рабочий пример чтобы понятно было: https://codepen.io/anon/pen/MLKNMJ

Answer 1

[Андрей]

вот так будет правильней
https://codepen.io/anon/pen/BMKBjy

Comments

[Антон Вебсайтовский]

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

[Антон Вебсайтовский]

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

[Андрей]

Антон Вебсайтовский, добавьте pointer-events: none; к :before и :after

[Антон Вебсайтовский]

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

[Андрей]

Антон Вебсайтовский, https://caniuse.com/#feat=pointer-events

[Андрей]

можно разными методами это сделать можно visibility менять можно z-index. я обычно ставлю pointer-events чтоб вообще убрать события с тултипа

[Антон Вебсайтовский]

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

[Антон Вебсайтовский]

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

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

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

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

[Андрей]

да но это плохая идея. анимация будет обрываться

[Андрей]

z-index:-1 можно даже

[Антон Вебсайтовский]

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

[Илья Молчанов]

только никогда не привязывайте стили к id. Только к классам. Это считается одной из грубейших ошибок

https://codepen.io/plushevy/pen/aVvgNe

[Антон Вебсайтовский]

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

[Андрей]

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

id
Задает стилевой идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.

[Андрей]

тут грубейшая ошибка только в том что при таком подходе этот тултип может быть только у одного элемента на странице. т.к. id уникален должен быть для каждого элемента

[Антон Вебсайтовский]

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

.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 переделал, а то он применял стиль к моим кнопкам и выводил им тень и т.д.

[Антон Вебсайтовский]

Андрей, Я тож id обычно применял для скриптов, а так все классы обычно ставлю.

[Антон Вебсайтовский]

Андрей, что-то у меня так и не вышло поверх сделать, через з-индекс.

[Андрей]

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

[Антон Вебсайтовский]

Андрей, Сделал реализацию блоков, только svg не видно, ну да ладно ) кнопки видно и все остальное.

Вот: https://codepen.io/anon/pen/rPLaxB

[Илья Молчанов]

Антон Вебсайтовский, это одна из популярных ошибок начинающего верстальщика:
id нужен для обращения из JS. ( к примеру ) и он должен быть уникален для страницы. Иначе начинаются беды и проблемы.

[Илья Молчанов]

Антон Вебсайтовский, по картинке кажется будто у тебя у соседнего блока стоит overflow: hidden;

[Антон Вебсайтовский]

Илья Молчанов, да, так оно и есть, вот рабочий пример: https://codepen.io/anon/pen/rPLaxB