Хаки и Скрипты Next Generation CMS

красивые закруглённые всплывающие подсказки к формам.

irbees2008 irbees2008 Опубликовано - 6 - апреля Tooltips
2579 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Предлагаю Вашему вниманию статью, в которой показано как сделать красивые закруглённые всплывающие подсказки к формам.


Скачиваем скрипт: Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
В нем лежат:
js/form-field-tooltip.js = Основной JS-файл для наших подсказок
js/rounded-corners.js = JS-файл, который формирует закруглённые уголки для подсказки
css/form-field-tooltip.css = CSS-файл оформления подсказки
images/* = Изображения уголков.
Всё заливаем в папку с шаблоном
Установка скрипта
Первое, что надо сделать это подключить JS и CSS файлы к нашей странице. Вот так:
Перед </HEAD> вставить

Код:
<link rel="stylesheet" href="{tpl_url}/css/form-field-tooltip.css" media="screen" type="text/css">
<script type="text/javascript" src="{tpl_url}/js/rounded-corners.js"></script>
<script type="text/javascript" src="{tpl_url}/js/form-field-tooltip.js"></script>

Текст подсказки
Текст подсказки Вам нужно ввести прямо в тег <input> или <textarea>, добавив к нему аттрибут tooltipText.
Например:
Код:
<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEE');
tooltipObj.setCloseMessage('Exit');
tooltipObj.initFormFieldTooltip();
</script>

Можешь почитать и вот эту статейку "Отступаем.......Bootstrap 4"

Опрос

Ваше мнение

Как вам наш дизайн сайта?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3408 дней
  • Новостей: 549
  • Комменты: 254
  • Зарегистрированно : 578
  • Онлайн всего: [8]
  • Гости: [8]
  • Были сегодня : [5] Google, Яндекс, Яндекс, redflame, Яндекс
  • SQL запросов: 31
  • Генерация страницы: 0.341сек
  • Потребление памяти: 4.952 Mb 
  •   яндекс.ћетрика