Головна → HTML уроки і поради → Як зробити красиву підказку для посилання
Підказка для посилання часто допомагає користувачеві швидше орієнтуватися на сайті, а значить і отримувати швидше потрібну інформацію. Стандартна підказка виглядає тьмяно і при цьому доводиться чекати її появи близько 3 секунд. У цій статті я опишу як зробити красиву підказку для посилань, яка з'являється моментально при наведення курсору мишки на посилання. Приклад роботи такої підказки реалізований на цьому сайті.
Варто сказати, що для цього існує безліч способів реалізації, але майже всі вони припускають велике навантаження через безліч ефектів. Мій спосіб простий тим, що практично не вантажить браузер і не вимагає завантажень картинок. Перейдемо безпосередньо до опису.
1. Скачайте наступний архів: podskazka.rar.
2. В архіві буде лежати єдиний файлик podskazka.js:
3. Увімкніть цей файл до себе на сайт (можете його перейменувати). Для цього в будь-якому місці сайту напишіть:
Налаштування
У самому верху файлик podskazka.js будуть наступні рядки:
У параметрі qTipTag вказується для яких html тегів буде працювати підказка. У qTipX задається відступ підказки по осі Х, в qTipY по осі У. Ці параметри можна змінювати і робити так, як Вам зручно. Я зупинився саме на цих значеннях.
4. Тепер потрібно прописати стиль для нашої підказки, щоб вона виводилася в красивій рамці. Для цього відкрийте Ваш файл зі стилями .css (стилі) і пропишіть в кінці:
Тут є чотири важливі параметри:
- border: 1px solid # 666 - завдання товщини рамки і її кольору
- background: # e6fff5 - завдання фону рамки
- font-size: 14px - розмір шрифту
- color: # 000 - колір шрифту
Після цього на сайті у всіх посилань де прописаний атрибут title буде спливати підказка з описом, яку ви вкажете.