Как изменить атрибут заголовка элемента с помощью 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 до v1.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');не работала.

Когда я удалил атрибут title в классе HTML span, 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>