Сообщений в теме: 14

[Василий]

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

 

Можно ли в форме сделать Tooltips к полям? И если да, то как. 

 

Спасибо. 

[ripcord]

Смотря что Вы подразумеваете под Tooltips и смотря что за поля.

[Василий]

Я о примечаниях к полям, отображаются которые при наведении на поле. Своего рода подсказка к корректному заполнению поля. 

[ripcord]

А что за поля? На примере demo.jbzoo.com укажите?

[Василий]

Любые поля в корзине - текстовые, выпадающие списки ... 

[ripcord]

Да, со всеми возможно.

[Василий]

Так как сделать то? 

[ripcord]

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

.tut_luboye_imya.first::before, .tut_luboye_imya.last::before
{
    position: absolute;
    content: "";
    display: block;
    width: 103px;
    height: 29px;
    -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,.5), inset 0 0 35px rgba(255,255,255,.8);
    -moz-box-shadow: 0px 3px 5px rgba(0,0,0,.5), inset 0 0 35px rgba(255,255,255,.8);
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5), inset 0 0 35px rgba(255, 255, 255, 0.8);
    background-color: rgb(247, 247, 247);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(247,247,247)), to(rgb(207,207,207)));
    background-image: -webkit-linear-gradient(top, rgb(247,247,247), rgb(207,207,207));
    background-image: -moz-linear-gradient(top, rgb(247,247,247), rgb(207,207,207));
    background-image: -o-linear-gradient(top, rgb(247,247,247), rgb(207,207,207));
    background-image: linear-gradient(top, rgb(247,247,247), rgb(207,207,207));
    border-radius: 5px;
    margin: -7px 0 0 -120px;
    opacity: 0;
}

Добавляете отображение при ховере и анимацию по желанию

.tut_luboye_imya.first:hover::before, .tut_luboye_imya.last:hover::before
{
    opacity: 1;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s;
}

и содержание каким-нить таким способом:

.roditelskiy_element:first-child::before, .roditelsky_element:last-child::before
{
    content: "Мобила";
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.6);
    text-align: center;
    line-height: 31px;
    text-transform: uppercase;
}

content: "Мобила" - тут лучше не использовать кириллицу, у меня для примера.

 

Получилось вот так при ховере .form-field-row для моего случая.

 

Пруф:

 

Сообщение отредактировал ripcord: 10 September 2013 - 22:04

[Василий]

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

 

Получилось хорошо! Но посетители сайта - русскоговорящее население =) и нужна кириллица. В админке такие подсказки уже реализованы на кириллице. Было был удобнее в самой форме это делать (может быть сделают разработчики), а не самописанием. 

 

Спасибо за совет. 

[Kess]

Можно вывести во фронтенд те же подсказки, которые предназначены для административной части и заполняются при создании элементов (поле "Описание"). Вам такое подойдет?

 

Сообщение отредактировал Kess: 12 September 2013 - 11:44