JS властивість Element.title

Загальний опис

Властивість title елемента HTML встановлює або повертає заголовок елемента, який відображається як підказка. Вона широко використовується для надання додаткової інформації або пояснень щодо елементів інтерфейсу, таких як посилання, кнопки, зображення тощо. Ця властивість корисна для покращення зручності використання веб-сторінки, забезпечуючи користувачам додаткові відомості про функціональність елементів без необхідності завантажувати додаткові сторінки.

Використання властивості title є досить простим. Для встановлення заголовка елемента потрібно просто присвоїти рядок з текстом властивості title відповідного HTML-елемента. Наприклад:

<a href="https://example.com" title="Перейти на приклад сайту">Приклад посилання</a>

У цьому випадку, коли користувач наведе курсор миші на посилання, з'явиться підказка "Перейти на приклад сайту".

Властивість title також можна встановлювати та змінювати динамічно за допомогою JavaScript. Ось простий приклад:

<button id="myButton">Натисни мене</button>

const button = document.getElementById('myButton');
button.title = 'Це кнопка, натиснувши яку ви побачите повідомлення';

Тут ми отримуємо посилання на елемент button за допомогою document.getElementById('myButton'), а потім присвоюємо рядок тексту властивості title цього елемента.

Властивість title також часто використовується для надання додаткової інформації про зображення на веб-сторінці. Наприклад:

<img src="image.jpg" alt="Опис зображення" title="Детальна інформація про зображення">

У цьому випадку, коли користувач наведе курсор на зображення, з'явиться підказка "Детальна інформація про зображення".

Крім того, властивість title може бути корисною для елементів форми, таких як поля вводу, випадаючі списки тощо, надаючи користувачам додаткові вказівки або пояснення щодо їх призначення або очікуваного вводу.

Важливо зазначити, що властивість title не призначена для відображення великих обсягів тексту, оскільки підказки зазвичай мають обмежений розмір та можуть бути обрізані або погано відображатися залежно від браузера та платформи. Тому рекомендується використовувати стислі та лаконічні описи в заголовках елементів.

Загалом, властивість title є корисним інструментом для покращення зручності використання веб-сторінок, надаючи користувачам додаткову інформацію про елементи інтерфейсу без необхідності завантажувати додаткові сторінки або відкривати додаткові вікна. Вона широко застосовується у веб-розробці для підвищення доступності та зрозумілості веб-інтерфейсів.

правити

Порада

Якщо ви динамічно змінюєте вміст веб-сторінки за допомогою JavaScript, не забувайте також оновлювати значення властивості title відповідних елементів. Це забезпечить актуальність підказок для користувачів. Ви можете встановити нове значення title за допомогою JavaScript, наприклад: element.title = 'Нова підказка'.

автор: Bond правити

Порада

Пам'ятайте, що властивість title призначена для відображення коротких підказок. Уникайте використання занадто довгих текстів, оскільки вони можуть бути обрізані або погано відображатися в деяких браузерах. Намагайтеся писати стислі та лаконічні заголовки, які передають основну ідею.

автор: Bond правити

Порада

Використовуйте властивість title для надання додаткової інформації про елементи форми, такі як поля вводу, випадаючі списки тощо. Це допоможе користувачам зрозуміти, який тип даних очікується для введення або яке значення вибрати зі списку. Наприклад: <input type="text" title="Введіть своє ім'я" placeholder="Ім'я">.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Element.title 

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	≤12.1	12	5.5

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<img src="/img/logo.svg" alt="Лого" id="myImage" width="100" title="Логотип довідника">

const image = document.getElementById('myImage');
const imageTitle = image.title || 'Зображення без заголовка';

image.addEventListener('mouseover', () => {
    console.log('Заголовок зображення: ' + imageTitle);
});

<button id="myButton">Наведи і затримайся</button>

const button = document.getElementById('myButton');

button.title = 'Це підказка, додана скриптом';
console.log('title кнопки:', button.title);