Исправляем вывод подсказок в формах Joomla 3.2 и выше

Многие, перейдя на Joomla 3.2 или версию выше, могли обнаружить в своих шаблонах, что подсказки (tooltips) к полям формы авторизации, регистрации и др. отображаются не правильно или не на своих позициях.

В основном это происходит, когда Вы устанавливаете на свой сайт шаблон, адаптированный для более низких версий Joomla.

Как это работает:

Всё что Вам нужно, для решения данной проблемы, это просто добавить в свой CSS файл стилей следующие строки:

.tooltip {
   position: absolute;
   z-index: 1030;
   display: block;
   visibility: visible;
   font-size: 11px;
   line-height: 1.4;
   opacity: 0;
   filter: alpha(opacity=0);
}
.tooltip.in {
   opacity: 0.8;
   filter: alpha(opacity=80);
}
.tooltip.top {
   margin-top: -3px;
   padding: 5px 0;
}
.tooltip.right {
   margin-left: 3px;
   padding: 0 5px;
}
.tooltip.bottom {
   margin-top: 3px;
   padding: 5px 0;
}
.tooltip.left {
   margin-left: -3px;
   padding: 0 5px;
}
.tooltip-inner {
   max-width: 200px;
   padding: 8px;
   color: #fff;
   text-align: center;
   text-decoration: none;
   background-color: #000;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
}
.tooltip-arrow {
   position: absolute;
   width: 0;
   height: 0;
   border-color: transparent;
   border-style: solid;
}
.tooltip.top .tooltip-arrow {
   bottom: 0;
   left: 50%;
   margin-left: -5px;
   border-width: 5px 5px 0;
   border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
   top: 50%;
   left: 0;
   margin-top: -5px;
   border-width: 5px 5px 5px 0;
   border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
   top: 50%;
   right: 0;
   margin-top: -5px;
   border-width: 5px 0 5px 5px;
   border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
   top: 0;
   left: 50%;
   margin-left: -5px;
   border-width: 0 5px 5px;
   border-bottom-color: #000;
}
.tooltip {
   max-width: 400px;
}
.tooltip-inner {
   max-width: none;
   text-align: left;
   text-shadow: none;
}
th .tooltip-inner {
   font-weight: normal;
}
.tooltip.hasimage {
   opacity: 1;
}
.tip-text {
   text-align: left;
}

Вы также можете скачать описанные выше стили отдельным файлом из вложения в конце статьи и подключить его в своём шаблоне.


Оставьте свой комментарий

Оставить комментарий от имени гостя

0 / 2500 Ограничение символов
Ваш текст должен быть в пределах 10-2500 символов
Комментарии | Добавить свои
  • Комментарии не найдены