Як змінити атрибут заголовка елемента за допомогою jQuery

У мене є елемент введення форми і хочу змінити його атрибут заголовка. Це повинно бути просто, як пиріг, але я чомусь не можу знайти, як це зробити. Як це робиться, і де і як слід шукати, як це зробити?

Перш ніж писати будь-який код, давайте обговоримо різницю між атрибутами та властивостями. Атрибути - це налаштування, які ви застосовуєте до елементів у розмітці HTML ; Потім браузер аналізує розмітку і створює DOM-об'єкти різних типів, які містять властивості, ініціалізовані зі значеннями атрибутів. На об'єктах DOM, таких як простий HTMLElement, ви майже завжди хочете працювати з його властивостями , а не з колекцією атрибутів .

Поточна найкраща практика полягає у тому, щоб уникати роботи з атрибутами, якщо вони не є спеціальними або немає еквівалентного властивості, яке б доповнило її. Оскільки titleдійсно існує властивість читання / запису на багатьох HTMLElements, ми повинні цим скористатися.

Детальніше про різницю між атрибутами та властивостями ви можете прочитати тут або тут .

Маючи це на увазі, давайте маніпулювати цим title...

Отримати або встановити titleвластивість елемента без jQuery

Оскільки titleце загальнодоступна власність, ви можете встановити його на будь-якому елементі DOM, який підтримує його за допомогою простого JavaScript:

document.getElementById('yourElementId').title = 'your new title';

Вилучення майже однакове; тут нічого особливого:

var elementTitle = document.getElementById('yourElementId').title;

Це буде найшвидший спосіб зміни заголовка, якщо ви оптимізатор, але оскільки ви хотіли, щоб jQuery включав:

Отримати або встановити title властивість елемента за допомогою jQuery (v1.6 +)

jQuery представив новий метод у v1.6 для отримання та встановлення властивостей. Щоб встановити titleвластивість на елемент, використовуйте:

$('#yourElementId').prop('title', 'your new title');

Якщо ви хочете отримати заголовок, опустіть другий параметр і зафіксуйте повернене значення:

var elementTitle = $('#yourElementId').prop('title');

Перегляньте prop()документацію API для jQuery.

Якщо ви дійсно не хочете використовувати властивості, або ви використовуєте версію jQuery до версії 1.6, тоді слід прочитати далі:

Отримати або встановити title атрибут елемента за допомогою jQuery (версії <1.6)

Ви можете змінити title атрибут за допомогою наступного коду:

$('#yourElementId').attr('title', 'your new title');

Або отримати його за допомогою:

var elementTitle = $('#yourElementId').attr('title');

Перегляньте attr()документацію API для jQuery.

У модальних діалогах jquery ui вам потрібно використовувати цю конструкцію:

$( "#my_dialog" ).dialog( "option", "title", "my new title" );

Я вірю

$("#myElement").attr("title", "new title value")

або

$("#myElement").prop("title", "new title value")

повинен зробити трюк ...

Я думаю, що ви можете знайти всі основні функції в jQuery Docs , хоча я ненавиджу форматування.

Іншим варіантом, якщо ви віддаєте перевагу, було б отримати елемент DOM від об’єкта jQuery і використовувати на ньому стандартні DOM-аксесоари:

$("#myElement")[0].title = "new title value";

"Спосіб jQuery", як згадують інші, полягає у використанні методу attr (). Дивіться документацію API для attr () тут .

jqueryTitle({
    title: 'New Title'
});

за першою назвою:

jqueryTitle('destroy');

https://github.com/ertaserdi/jQuery-Title

Якщо ви створюєте divта намагаєтесь додати його titleдо нього.

Спробуйте

var myDiv= document.createElement("div");
myDiv.setAttribute('title','mytitle');

Як додаток до відповіді @ Cᴏʀʏ, переконайтесь, що заголовок підказки вже не встановлено вручну в елементі HTML. У моєму випадку клас span для підказки вже мав фіксований текст, тому моя функція JQuery $('[data-toggle="tooltip"]').prop('title', 'your new title');не працювала.

Коли я видалив атрибут заголовка в класі span HTML, jQuery працював.

Так:

<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
      <span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" title="this is my pre-set title text"></span>
</span>

Потрібно:

<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
      <span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top"></span>
</span>