Создаем простой tooltip (подсказка)

[baltun]

Может тебе будет проще все посмотреть как

У вас нет разрешения на просмотр ссылки, пожалуйста Вход или Регистрация

, там и по экспериментировать можно.

 

[Роман_Тютин]

если я правильно понял то вот этот параметр отвечает за эффект появления и за эту пимпочку

a:hover.tooltips span {
  visibility: visible;
  opacity: 0.8;
  bottom: 30px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}

и ещё вопрос я же например вот так могу указать и будет параметр только для данного шаблона использовать, просто у меня два шаблона в одном tooltip сверху в другом с боку

.forum_view .button.mark-solved {
a.tooltips {
  position: relative;
  display: inline;
} ну и так далее

 

[baltun]

Пишет код по классам, и чтобы выполнялся в одном месте и не выполнялся в другом, должны быть как минимум разные классы или их вложения, это один фрагмент

.forum_view .button.mark-solved { }

Это другой:

a.tooltips {
  position: relative;
  display: inline;
}

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

 

[Роман_Тютин]

то есть если я правильно понял должно быть к примеру так

<span class="tooltip231" data-tooltip="Тут будет наша подсказка">Наша информация</span>

и соответственно тут вот так

tooltip231 {
    border-bottom: 1px dotted #0077AA;
    cursor: help;
}

.tooltip231::after {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px 8px 8px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #FFF;
    content: attr(data-tooltip);
    margin-top: -24px;
    opacity: 0;
    padding:...

или я опять чёт не то нагородил ?

 

[baltun]

Тут точку пропустил:

.tooltip231 {
    border-bottom: 1px dotted #0077AA;
    cursor: help;
}

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

 

[Роман_Тютин]

пропустил току запятую и все перестало работать

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

 

[baltun]

Нужно пробовать смотреть, на разных стилях может отображаться по разному и без корректировки как правило не обойтись, поэтому надо уметь пользоваться F12 консоль разработчика в браузерах, там можно на литу править код и видеть как все изменяется, а потом копировать его уже на боевой форум.

 

[Роман_Тютин]

вот я малёк и научился пользоваться консолью, а то до этого я не мог не как врубиться как всё это выглядит, эх вечерком запробую, да и почему так долго не мог врубиться как этот tooltip вставлять, не мог не как понять что он не для уже готовых объектов , а нужно оборачивать
<span class="tooltip" data-tooltip="Тут будет наша подсказка">Наша информация</span>