Крок 2. Ми створимо елемент із піктограмою та значенням підказки. Крок 3: Тепер ми використаємо код jQuery, щоб додати спливаючу підказку до елемента піктограми та додати його позицію розміщення. Крок 4: Нарешті, ми додамо стилі CSS до елемента підказки, щоб змінити колір елемента підказки.
Основний HTML підказки: Використовуйте елемент-контейнер (наприклад, <div>) і додайте до нього клас "tooltip".. Коли користувач наведе курсор миші на цей <div>, він покаже текст підказки. Текст підказки розміщується всередині вбудованого елемента (наприклад, <span>) із class="tooltiptext" .
На жаль, спливаюча підказка браузера за замовчуванням, створена за допомогою атрибута title, не може бути стилізована безпосередньо за допомогою CSS. Однак ви можете створити спеціальну спливаючу підказку зі стилем на ваш смак за допомогою HTML, CSS і трохи JavaScript або jQuery.
Підхід
- Створіть макет сторінки з відповідною назвою класу в HTML.
- Застосуйте відповідний стиль до елемента та тексту підказки.
- Розмістіть спливаючу підказку абсолютно та використовуйте властивості позиціонування CSS ліворуч і CSS праворуч, щоб розташувати спливаючу підказку ліворуч і праворуч від елемента.
Підказка Assert
- У Chrome наведіть курсор на поле зі спливаючою підказкою та виберіть Перевірити (або натисніть F12)
- Перейдіть на вкладку «Елементи» у «Перевірці» (або натисніть Ctrl + Shift + C)
- Натисніть підказку, і елемент буде показано внизу екрана.
- Використовуйте клавіші вгору та вниз на клавіатурі, щоб знайти елемент, який потрібно відобразити.